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PREFACE `> 





BFDG4EBy . U ARERR, — IR rh Pq n js Ej Y 30 年 的 历程 。 回 首 过 去 ,人 工 智 
能 、 云 计算 、 移 动 支付 这 些 互 联网 产物 不 仅 迅速 占据 了 我 们 的 生活 ,刷新 了 我 们 对 科技 发 展 
的 认 知 ,而 且 也 提高 我 们 的 生活 质量 水 平 。 人 们 谈论 的 话题 也 离 不 开 这 些 , 例 如 : 人 工 智 能 
是 否 会 蔡 代 人 类 ,成 为 工作 的 主要 劳动 力 ; 数字 货币 是 否 会 代替 纸币 流通 于 市 场 ; 虚拟 现 
实体 验 到 底 会 有 多 真实 多 刺激 ; 就 连 开 出 租车 的 司机 师傅 都 会 在 人 机 围棋 大 战 的 赛事 上 与 
你 赌 一 把 。 从 这 些 现象 中 不 难 发 现 , 互 联网 的 辐射 面 在 不 断 变 广 ,计算 机 科学 与 信息 技术 发 
展 的 普 适 性 在 不 断 变 强 ,信息 技术 如 化 雨 春风 , 润 物 无 声 地 全 面 融入 颠覆 了 我 们 的 生活 。 

1987 年 ,我 国 网 络 专家 钱 天 白 通过 拨号 方式 在 国际 互联 网 上 发 出 了 中 国有 史 以 来 第 一 
封 电子 邮件 ,“ 越 过 长 城 , 走 向 世界 ”, 从 此 ,我 国 互联 网 时 代 开 启 。30 年 间 , 人 类 社会 仍然 遵 
循 着 万 物 生 长 规律 自然 成 长 ,但 互联 网 的 枝 芽 却 依托 人 类 的 智慧 于 内 部 结构 中 野蛮 扩 延 ,并 
且 每 一 次 主流 设备 ,主流 技术 的 迭代 速度 明显 加 快 ,直到 今天 ,人 们 的 生活 是 “拇指 在 手机 屏 
幕 方 寸 间 游 走 的 距离 ,已 经 超过 双 脚 走 过 的 路 程 ”。 

据 估计 ,截至 2017 年 6 月 ,中 国 网 民 规模 已 达到 7. 5 亿 , 占 全 球 网 民 总 数 的 五 分 之 一 ， 
而 且 这 个 数字 还 在 不 断 地 增加 。 这 是 一 个 巨大 的 互联 市 场 ,可 以 得 到 我 们 所 需要 的 内 容 ， 
有 可 能 是 一 个 简单 的 Web 页 面 ,也 有 可 能 是 一 个 复杂 的 应 用 程序 。 

然而 , 面 对 快 速 发 展 的 互联 网 ,每 一 个 互联 网 人 亦 感到 焦虑 ,感觉 它 运转 的 速度 已 经 快 
到 我 们 追赶 的 极限 。 信 息 时 刻 在 更 新 ,科技 不 断 被 颠覆 ,想象 力也 一 直 被 挑战 , 面 对 这 些 , 人 
们 感到 不 安 的 同时 又 对 未 来 的 互联 网 充满 期 待 。 

互联 网 的 魅力 正在 于 此 , 恰 如 山 之 两 面 .一 面 阴暗 上 涩 ,一 面 生机 勃勃 ,一 旦 跨 过 山 之 
呀 , 即 是 不 一 样 的 风景 。 就 是 这 样 的 挑战 会 让 人 着 迷 , 并 甘愿 为 之 付出 努力 。 而 这 个 行业 还 
有 很 多 伟大 的 事情 值得 去 琢磨 ,去 付出 自己 的 匠心 。 

RPM HTML 程序 设计 初学 者 的 角度 出 发 ,对 HTML 语言 的 概念 和 技术 等 基础 内 容 
进行 了 全 面 .详细 的 讲解 。 书 中 内 容 所 涉及 的 知识 点 和 相关 信息 ,应 了 解 并 掌握 ,夯实 基础 ， 
切 不 可 急于 求 成 ; 有 相关 经 验 、 但 了 解 不 足 的 开发 人 员 ,也 可 从 本 书 中 找到 许多 不 同 领 域 的 
兴趣 点 和 用 法 。 本 书 实例 内 容 选 取 市 场 流行 应 用 项 目 或 产品 项 目 ,并 附 有 章 后 练习 题 ,部 分 
练习 题 模拟 大 型 软件 开发 企业 实例 项 目 比 较 具 体 , 其 他 练习 题 则 较为 通俗 易 懂 , 旨 在 普及 读 
者 对 相应 章节 内 容 的 理解 程度 ,帮助 读者 巩固 本 章 的 内 容 。 

本 书 在 编写 过 程 中 获得 了 国家 自然 科学 基金 委员 会 与 中 国民 用 航空 局 联合 资助 项 目 
(U1733110) .中央 高 校 基本 科研 业务 费 专项 资金 (2672018ZYGX2018J018)、 湖 南 省 科学 
“十 三 五 ”规划 课题 (XJK016BGD009) ,湖南 省 教学 改革 研究 课题 (2015001)、 湖 南 省 自然 科 
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学 基金 (2017JJ1012) 、 国 家 自然 科学 基金 (71371067) 的 资助 ,并 得 到 了 电子 科技 大 学 、 湖 南 
大 学 、 国 防 科技 大 学 .佛山 科 学 技术 学 院 和 深圳 华 大 乐 业 教育 科技 有 限 公司 等 领导 的 大 力 支 
持 , 同 时 参考 了 一 些 相关 著作 和 文献 ,在 此 深 表 感 谢 。 

本 书 在 撰写 过 程 中 得 到 了 周 忠 宝 、 何 敏 藩 、 邢 立 宁 、 姚 锋 . 叶 昭 晖 、. 邓 劲 生 、 姚 迷 道 、 邹 伟 、 
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HTML 概述 与 基本 标签 多 


a T Web 和 HTML 的 关系 

名 理解 HTML 标签 在 Web 网 页 中 的 作用 
z JE HTML 文档 的 结构 

名 掌握 常用 的 HTML 标签 


请 在 预习 时 学 会 下 列 单词 的 含义 和 发 音 ,并 填写 在 横 线 处 。 


. Internet: 

. WWW(World Wide Web): 

. HTTP(Hyper Text Transfer Protocol) : 
. URL(Uniform Resource Locator): 

. HTML(Hyper Text Markup Language): 
. CSS(Cascading Style Sheets): 

. head: 

. body: 

. title; 
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10. color: 





11. object: 





1.1 Web 概述 


Web 是 一 种 多 媒体 信息 服务 系统 ,又 称 为 WWW(CWorld Wide Web ,万 维 网 ) ,由 欧洲 
核子 物理 研究 中 心 (CERN) 在 1989 年 研制 ,是 Internet( 因 特 网 ) 中 最 受 欢 迎 的 一 种 多 媒体 
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信息 服务 系统 。 整 个 系统 由 Web 服务 器 浏览 器 和 通信 协议 组 成 ,通信 协议 HTTP(Hyper 
Text Transfer Protocol) 能 够 传输 任意 类 型 的 数据 对 象 来 满足 Web 服务 器 与 客户 之 间 的 多 
媒体 通信 的 需要 。Web 带 来 的 是 世界 范围 的 超级 文本 服务 。 用 户 可 通过 因特网 从 全 世界 
任何 地 方 调 来 所 希望 得 到 的 文本 、 图 像 ( 包 括 活动 影像 ) 和 声音 等 信息 。 另 外 ,Web 还 可 提 
供 其 他 的 因特网 服务 ,如 TELNET 、FTP Gopher 和 USERNET 等 。 

Web 是 一 个 有 许多 互相 链接 的 超级 文本 文档 组 成 的 系统 ,通过 互联 网 访问 。 在 Web 
上 ,不仅 可 以 传递 文字 信息 ,还 可 以 传递 图 形 声音、 影像 .动画 等 多 媒体 信息 。 在 这 个 系统 
中 每 一 个 有 用 的 事物 称 为 一 个 “资源 ”, 由 一 个 全 局 “统一 资源 标识 符 C(URI) ”标识 ,然后 这 些 
资源 通过 HTTP 协议 传送 给 用 户 , 用 户 通过 单 击 链接 来 获得 资源 。 

Web 的 成 功 在 于 使 用 了 HTTP 超 文本 传输 协议 ,制定 了 一 套 标准 的 、 易 为 人 们 掌握 的 
超 文本 标记 语言 HTML, 使 用 了 信息 资源 的 统一 定位 格式 URL。 我 们 可 以 把 Web 看 作 是 
一 个 图 书馆 ,而 每 一 个 网 站 就 是 这 个 图 书馆 中 的 一 本 书 。 每 个 网 站 都 包括 许多 画面 ,进入 该 
网 站 时 显示 的 第 一 个 画面 就 是 “主页 ?或 “首页 ”( 相 当 于 书 的 目录 ) ,而 同一 个 网 站 的 其 他 画 
面 都 是 “网 页 ”"( 相 当 于 书页 ) 。 

超 文 本 (Hypertext) 是 用 超 链接 的 方法 ,将 各 种 不 同 空间 的 文字 信息 组 织 在 一 起 的 网 状 
文本 。 它 是 由 一 个 称 为 网 页 浏览 器 (Web browser) 的 程序 负责 显示 。 网 页 浏览 器 从 网 页 服 
务 器 (Web Server) 取 回 称 为 “文档 ?或 “网 页 ”的 信息 并 显示 ,通常 是 显示 在 计算 机 显示 器 或 
移动 智能 设备 的 屏幕 上 。 人 们 可 以 跟随 网 页 上 的 超 链 接 (Hyperlink) ,再 转 到 其 他 网 页 ,也 
可 以 填写 并 送出 数据 给 网 页 服务 器 。 顺 着 超 链接 走 的 行为 称 为 浏览 网 页 。 相 关 的 数据 通常 
排 成 一 群 网 页 ,又 叫 网 站 。 

用 户 需 要 浏览 万 维 网 上 的 网 页 或 者 获取 其 他 网 络 资源 的 时 候 , 通 常 要 在 浏览 器 上 输入 
想 要 访问 的 网 页 的 统一 资源 定位 符 (URL) 或 者 通过 超 链接 链接 到 那个 网 页 或 者 资源 。 之 
后 的 过 程 是 : 

首先 是 URL 的 服务 器 名 部 分 ,被 域名 系统 的 因特网 数据 库 解析 ,并 根据 结果 决定 进入 
哪个 IP 地 址 。 然 后 向 那个 IP 地 址 工作 的 服务 器 发 送 HTTP HR (Request) ,通常 情况 下 ， 
HTML 文本 、 图 片 和 构成 该 网 页 的 一 切 其 他 文件 会 很 快 被 逐一 请 求 并 发 送 (Response) 给 用 
户 。 最 后 网 络 浏览 器 把 HTML, CSS 和 接收 到 的 其 他 文件 的 内 容 , 加 上 图 像 .链接 和 其 他 必 
需 的 资源 ,显示 给 用 户 。 这 就 是 我 们 看 到 的 网 页 。 

大 多 数 的 网 页 自身 包含 有 超 链 接 指向 其 他 相关 网 页 ,可 能 还 有 下 载 、 源 文献 在线 播 放 
的 多 媒体 资源 和 其 他 网 络 资源 。 像 这 样 通过 超 链 接 ,把 有 用 的 相关 资源 组 织 在 一 起 的 集合 ， 
就 形成 了 一 个 所 谓 的 信息 的 “网 ”。 这 个 网 在 因特网 上 被 方便 使 用 ,就 构成 了 最 早 的 万 维 网 。 

万 维 网 的 核心 部 分 由 下 面 3 个 标准 构成 : 

忆 统 一 资源 标识 符 (URL) ,这 是 一 个 统一 地 为 资源 定位 的 系统 。 

名 超 文本 传送 协议 (HTTP) , 它 负 责 规 定 客户 端 和 服务 器 怎样 互相 交流 。 

必 超 文本 标记 语言 (HTML) ,作用 是 定义 超 文本 文档 的 结构 和 格式 。 
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1.2 HTML 超级 文本 标记 语言 


1.2.1 HTML 简介 


HTML(Hyper Text Marked Language, 超 文本 标记 语言 ) 是 一 种 用 来 制作 超 文 本 文档 
的 简单 标记 语言 。 

HTML 是 一 种 规范 一 种 标准 , 它 通过 标记 符号 来 标记 要 显示 的 网 页 中 的 各 个 部 分 。 
网 页 文件 本 身 是 一 种 文本 文件 ,通过 在 文本 文件 中 添加 标记 符 , 可 以 告诉 浏览 器 如 何 显示 其 
中 的 内 容 ( 如 : 文字 如 何 处 理 ,画面 如 何 安排 ,图 片 如 何 显示 等 )。 浏 览 器 按 顺 序 阅读 网 页 文 
件 , 然 后 根据 标记 符 解 释 和 显示 其 标记 的 内 容 , 对 书写 出 错 的 标记 将 不 指出 其 错误 , 且 不 停 
止 其 解释 执行 过 程 ,编制 者 只 能 通过 显示 效果 来 分 析出 错 原因 和 出 错 部 位 。 但 需要 注意 的 
是 ,对 于 不 同 的 浏览 器 ,对 同一 标记 符 可 能 会 有 不 完全 相同 的 解释 ,因而 可 能 会 有 不 同 的 显 
示 效 果 。 

用 HTML 编写 的 超 文本 文档 称 为 HTML 文档 。HTML 文档 最 常用 的 扩展 名 是 . html， 
因为 在 DOS 操作 系统 中 文件 名 的 后 级 只 允许 有 3 位 ,所 以 . htm 扩展 名 也 被 使 用 。 虽 然 现 
在 使 用 的 比较 少 了 ,但 是 . htm 扩展 名 仍旧 普遍 被 支持 。 

HTML 之 所 以 称 为 超 文本 标记 语言 ,是 因为 文本 中 包含 了 所 谓 “ 超 链接 ”点 就 是 一 种 
URL 指针 ,通过 激活 ( 单 击 ) 它 ,可 使 浏览 器 方便 地 获取 新 的 网 页 。 这 也 是 HTML 获得 广泛 
应 用 的 最 重要 的 原因 之 一 。 

由 此 可 见 ,网 页 的 本 质 就 是 HTML, 通 过 结合 使 用 其 他 的 Web 技术 (如 脚本 语言 .CGI、 
组 件 等 ) ,可 以 创造 出 功能 强大 的 网 页 。 因 而 ,HTML 是 Web 编程 的 基础 ,也 就 是 说 万 维 网 
是 建立 在 超 文 本 基础 之 上 的 。 


1.2.2 HTML 发 展 


HTML 由 蒂 姆 。 伯 纳 斯 。 李 (Tim Berners-Lee) 给 出 原始 定义 ,由 IETF 用 简化 的 
SGML (标准 通用 标记 语言 ) 语 法 进一步 发 展 ,到 后 来 发 展 成 为 国际 标准 ,一 直 由 万 维 网 联盟 
(W3C) 维 护 。 

早期 的 HTML 语法 被 定义 成 较 松散 的 规则 ,因此 有 利于 不 熟悉 网 络 出 版 的 人 采用 。 
网 页 浏览 器 接受 了 这 个 现实 ,并 且 可 以 显示 语法 不 严格 的 网 页 。 随 着 时 间 的 流逝 ,官方 标准 
渐渐 趋 于 严格 的 语法 ,但 是 浏览 器 继续 显示 一 些 远 称 不 上 合乎 标准 的 HTML。 使 用 XML 
的 严格 规则 的 XHTML( 可 扩展 超 文本 标记 语言 ) 是 W3C 计划 中 的 HTML 的 接替 者 。 虽 
然 很 多 人 认为 它 已 经 成 为 当前 的 HTML 标准 ,但 是 它 实 际 上 是 一 个 独立 的 与 HTML 平行 
发 展 的 标准 。 


1.2.3 基本 结构 
HTML 的 基本 结构 分 为 头 部 (head) 和 主体 (body) 两 部 分 , 头 部 包括 网 页 标题 C title) 
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等 基本 信息 ,主体 包括 网 页 的 内 容 信息 (如 图 片 ,文字 等 )。 注 意 标签 都 以 “<>”" 开 始 , 以 
“</>” 结 束 ,要 求 成 对 出 现 , 并 且 标 签 之 间 要 有 缩 进 ,体现 层次 感 ,以 便 阅 读 和 修改 ,基本 结 


构 如 图 1-2-1 所 示 。 





<html> 





<head> 
<title> 我 的 第 一 个 网 页 </title> 
</head> 








<body> 
<p>Hello World!</p> 
</body> 





站 头 部 部 分 


H HTML 


主体 部 分 











</html> 








1-2-1 HTML 基本 结构 


说 明 : 


HTML 文件 中 的 第 一 个 标签 是 < html >。 这 个 标签 告诉 浏览 器 这 是 HTML 文件 的 开 
始点 。 文 件 中 最 后 一 个 标签 是 </html >。 这 个 标签 告诉 浏览 器 这 是 HTML 文档 的 结束 点 。 
位 于 < head > 标签 和 </head > 标签 之 间 的 文本 是 头 信息 。 头 信息 不 会 显示 在 浏览 器 窗口 中 。 
< title > 标签 中 的 文本 是 文档 的 标题 。 标 题 会 显示 在 浏览 器 的 标题 栏 中 。< body > 标签 中 的 
内 容 是 将 被 浏览 器 显示 给 用 户 的 网 页 正文 。< p> 和 </p > 标签 表示 的 是 段落 。 


1.2.4 编辑 工具 


了 解 了 HTML 文档 的 基本 结构 后 ,下 面 介绍 常用 的 HTML 代码 编辑 工具 。 


1. 记事 本 


记事 本 是 Windows 自 带 安装 的 编辑 附件 ,使 用 简单 方便 ,实际 项 目 开 发 中 也 常用 于 代 
码 较 少 的 编辑 或 维护 。 使 用 记事 本 编辑 HTML 文档 的 步骤 如 下 。 


(1) 在 Windows 中 打开 记事 本 程序 。 


(2) 在 记事 本 中 输入 HTML 代码 ,如 例 1-2-1 所 示 。 


例 1-2-1 HTML 基本 结构 代码 


<head> 


</head> 


(3) 单 击 菜单 "文件 ”保存 ”弹出 “另存 为 ?对 话 框 , 如 图 1-2-2 所 示 ,将 上 述 文档 保存 
为 后 缀 为 . htm 或 * . html 的 HTML 文档 ,如 my_firstPage. html, 
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图 1-2-2 记事 本 保存 示意 图 


(4) 双击 保存 的 HTML 文档 , Windows 将 自动 调 Daea =s] 
用 浏览 器 软件 (如 IE) 打开 HTML 文档 ,如 图 1-2-3 于 We cvswr 2 - lol. m | 
所 示 。 








2. UItraEdit 

(1) 相 比 记事 本 而 言 ,UItraEdit 是 功能 强大 的 编辑 
软件 , 它 支 持 HTML 标签 的 颜色 标识 ,代码 缩 进 、 搜 索 等 
功能 ,如 图 1-2-4 所 示 。 
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1 
3 “<title> 我 的 第 一 个 网 页 〈 网 页 标题 ) </title> 
4 </head> 

5 <body> 

6 HTML 网 页 

7 </body> 
8 </html> 
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1-2-4 HTML 代码 
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(2) 其 编辑 HTML 文档 的 步骤 与 记事 本 相同 。 为 了 方便 学 习 HTML 的 各 类 标签 ,一 
般 采 用 UItraEdit 作为 HTML 文档 的 编辑 工具 。 


1.3 页 面 主体 背景 设置 


在 < body > 和 </body > 中 放置 的 是 页 面 中 所 有 的 内 容 , 如 图 片 文字、 表格 .表单 . 超 链接 
等 设置 。 为 了 让 整个 页 面 的 显示 方式 可 以 控制 ,< body > 标签 有 自己 的 属性 ,设置 < body > 标 
签 内 的 属性 ,就 可 控制 整个 页 面 的 显示 方式 。< body > 标签 的 属性 如 表 1-3-1 所 示 。 


表 1-3-1 < body > 标签 的 属性 














属 性 Ho 述 
background 设 定 背景 墙纸 所 用 的 图 像 文件 ,可 以 是 GIF 或 JPEG 文件 的 绝对 或 相对 路 径 
bgcolor 设 定 背 景 颜色 , 当 已 设 定 背 景 墙 纸 时 ,这 个 属性 会 失去 作用 ,除非 墙纸 有 透明 部 分 
leftmargin 设 定 网 页 显示 画面 与 浏览 器 窗口 左边 沿 的 间隙 ,单位 为 像素 





topmargin 


设 定 网 页 显示 画面 与 浏览 器 窗口 上 边沿 的 间隙 ,单位 为 像素 





rightmargin 


设 定 网 页 显示 画面 与 浏览 器 窗口 右边 沿 的 间隙 ,单位 为 像素 





bottommargin 


设 定 网 页 显示 画面 与 浏览 器 窗口 下 边沿 的 间隙 ,单位 为 像素 





text 


设 定 整个 网 页 中 的 文字 颜色 





link 


设 定 一 般 超 链接 文本 的 显示 颜色 





alink 


设 定 鼠 标 移 动 到 超 链接 上 时 , 超 链接 文本 的 显示 颜色 





vlink 





设 定 访问 过 的 超 链接 文本 的 显示 颜色 


本 节 主 要 讲述 背景 属性 ,其 他 属性 后 面 会 讲 到 。 


| 


设置 网 页 的 背景 颜色 


设置 < body > 的 bgcolor 属性 可 以 改变 网 页 的 整体 背景 色 , 如 bgcolor=" # 00ff00", 创 
建 一 个 网 页 文件 ,命名 为 bgcolor. html ,编写 代码 如 例 1-3-1 所 示 o 


例 1-3-1 


<html> 


页 面 背 景 颜色 设置 


<head> 
<title> 我 的 第 一 个 网 页 (网 页 标题 )</title> 
</head> 


HTML 网 页 
</body> 


</html> 


£ 
2 
3 
4 
5 < body bgcolor = " # C3C7CB"> 
6 
i 
8 


运行 效果 图 如 图 1-3-1 所 示 。 
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图 1-3-1 页 面 背景 颜色 设置 
例 1-3-1 的 页 面 背景 采用 的 “# C3C7CB” 是 一 种 蓝 色 。 表 1-3-2 列举 了 常用 的 颜色 
代码 。 
表 1-3-2 常用 的 颜色 代码 


























颜 色 颜色 名 和 RGB 值 颜 色 颜色 名 和 RGB 值 
白色 white( # FFFFFF) 绿色 green( # 00FF00) 
黄色 yellow( # FFFF00) 黑色 black( # 000000) 
红色 red( # FF0000) 紫色 purple( # A020F0) 
蓝 色 blue( # 0000FF) 


1.3.2 设置 网 页 的 背景 图 片 


通过 设置 < body > 的 background 属性 可 以 设置 < body > 的 背景 图 片 。 根 据 不 同 的 需 
求 ,可 以 设置 图 片 背 景 的 平 铺 方式 ,创建 一 个 网 页 文件 ,命名 为 background. html, 编 写 代码 
如 例 1-3-2 所 示 。 

例 1-3-2 ”页 面 背景 图 片 设置 


<html> 
< head> 
<title> 我 的 第 一 个 网 页 (网 页 标题 )</title> 

</head > 

< body background = bg. jpg> 

HTML 网 页 

</body> 

</html> 


ounous wne 


例 1-3-2 的 页 面 背景 图 片 路 径 采 用 相对 路 径 ,bg. jpg 位 于 background. html 同一 级 目 
录 ,默认 情况 下 图 片 自动 排列 , 铺 满 整 个 页 面 ,效果 如 图 1-3-2 所 示 。 
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1-3-2 页 面 主体 背景 设置 


1.4 常用 的 HTML 标签 


本 节 将 介绍 网 页 文档 中 常用 的 基本 标签 。 
1.4.1 换行 标签 


当 文 字 到 达 浏览 器 边界 时 将 自动 换行 ,但 是 当 调整 浏览 器 宽度 时 ,文字 换行 的 位 置 也 相 
应 地 发 生变 化 ,格式 就 显得 相当 混乱 了 。 为 了 规范 格式 ,可 以 用 换行 标签 <br/> 进 行 强制 换 
行 , 该 标签 没有 结束 标签 。 例 如 ,希望 "北京 欢 迎 你 ”的 歌词 紧凑 显示 ,每 句 间 要 求 换行 ,其 对 
应 的 HTML 代码 如 示例 1-4-1 所 示 。 

例 1-4-1 换行 标签 应 用 


<html> 
<head> 
<title > 换行 标签 的 应 用 </title> 
</head> 
<body> 
北京 欢迎 你 < br/> 
北京 欢迎 你 ,有 梦想 谁 都 了 不 起 !< br/> 
有 勇气 就 会 有 奇迹 。< br/> 
北京 欢迎 你 ,为 你 开天辟地 < br/> 


Dowaounmewnb hm 
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10 流动 中 的 魅力 充满 朝气 。< br 人 > 

11 北京 欢迎 你 ,在 太阳 下 分 享 呼吸 < br/> 
12 在 黄土 地 刷新 成 绩 。< br/> 

13 北京 欢迎 你 , 像 音 乐 感动 你 < br/> 

14 让 我 们 都 加 油 去 超越 自己 <br/> 
15 </body> 

16 </html> 


其 运行 效果 如 图 1-4-1 所 示 o 
北京 欢迎 你 
北京 欢迎 你 ， 有 人 梦想 谁 都 了 不 起 ! 
有 勇气 就 会 . 
北京 欢迎 你 ， 为 你 开 天 冬 地 
流动 中 的 魅力 充满 朝气 。 
北京 欢迎 你 ， 在 太阳 下 分 享 呼吸 
在 黄土 地 刷新 


北京 欢迎 你 ， 像 音乐 感动 你 
让 我 们 都 加 油 去 超越 自己 。 


图 1-4-1 换行 标签 应 用 


1.4.2 字体 标签 
HTML 中 用 < font > 标签 控制 文字 的 字体 ,大 小 和 颜色 。 控 制 方式 是 利用 属性 设置 实 
现 的 ,其 属性 如 表 1-4-1 所 示 。 
È 1-4-1 font 标签 的 属性 











属性 使 用 功能 默认 值 
face 设置 文字 使 用 的 字体 宋体 
Size 设置 文字 的 大 小 3 

color 设置 文字 的 颜色 黑色 











其 格式 为 < font face 王 值 1 size=/B 2 color= 值 3 > 文字 </font > 

1. 字体 大 小 

size 属性 用 来 设置 文字 的 大 小 ,其 取 值 范围 为 1 一 7。 也 可 以 用 "十 ?或 “一 ?指定 相对 于 
初始 值 增 量 或 减 量 。 编 写 代 码 如 例 1-4-2 所 示 。 

例 1-4-2 字体 大 小 设置 








1 <p><font size= "2" > 这 段 文字 的 字体 大 小 为 2 </font > </p> 
2 <p><font size= "3"> 这 段 文字 的 字体 大 小 为 3 </font ></p> 
3 <p><font size = "4"> 这 段 文字 的 字体 大 小 为 4 </font > </p> 


运行 效果 如 图 1-4-2 所 示 。 人 
ea rE z 这 段 文字 的 字体 大 小 为 3 
face 属性 用 来 设置 字体 的 字形 ,HTML 中 显示 的 字体 是 从 客 站 
户 端 调 用 的 ,所 以 为 了 保持 字形 一 致 ,建议 采用 宋体 ,HTML 中 也 
默认 采用 宋体 。 编 写 代 码 如 例 1-4-3 所 示 。 图 1-4-2 字体 大 小 设置 
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例 1-4-3 字形 设置 


1 <p><font face = "宋体 "> 这 段 文字 的 字形 为 宋体 </font > </p> 
2 <p><font face = "黑体 "> 这 段 文字 的 字形 为 黑体 </font > </p> 
3 <p><font face = "楷体 "> 这 段 文字 的 字形 为 楷体 </font > </p> 


运行 效果 如 图 1-4-3 所 示 。 

3. 字体 颜色 

color 属性 用 来 设置 字体 颜色 。 编 写 代 码 如 例 1-4-4 所 示 o 

例 1-4-4 字体 颜色 设置 

1 <p><font color= "#FF0000"> 这 段 文字 的 颜色 为 红色 </font > </p> 


2 <p><font color = "#FFFF00"> 这 段 文 字 的 颜色 为 黄色 </font > </p> 
3 <p><font color = "##R020F0"> 这 段 文字 的 颜色 为 紫色 </font > </p> 


运行 效果 如 图 1-4-4 所 示 。 


这 上段 文字 的 字形 为 宋体 这 段 文字 的 颜色 为 红色 
这 段 文字 的 字形 大 小 为 黑体 这 段 文字 的 颜色 为 黄色 
这 上 段 文字 的 字形 为 楷体 这 段 文字 的 颜色 为 紫色 
图 1-4-3 字体 字形 设置 图 1-4-4 字体 颜色 设置 


1.4.3 段落 排版 标签 


上 节 用 到 了 < p > 标签 ,本 节 来 介绍 < p > 标签 。< p > 标签 所 标识 的 文字 代表 同一 个 段落 
的 文字 。 不 同 段落 间 的 间距 等 于 连续 加 了 两 个 换行 符 , 也 就 是 要 隔 一 行 空白 行 ,用 以 区 别 文 
字 的 不 同 段落 。 它 可 以 单独 使 用 ,也 可 以 成 对 使 用 。 单 独 使 用 时 ,下 一 个 < p > 的 开始 就 意 
味 着 上 一 个 < p > 的 结束 。 良 好 的 习惯 是 成 对 使 用 。 


其 格式 : 


<p> 
<palign= 参数 > 


其 中 ,align 是 < p > 标签 的 属性 ,left center right 这 3 个 属性 参数 设置 段落 文字 的 左 、 中 , 布 
位 置 的 对 齐 方式 。 编 写 代 码 如 例 1-4-5 所 示 。 


例 1-4-5 段落 设置 


1 <html> 

2 < head> 

3 <title> 测 试 分 段 控 制 标签 </title> 
4 </head> 

5 <body> 

6 

ah 


<p> 花 儿 什 么 也 没有 。 它 们 只 有 凋谢 在 风 中 的 轻微 , 凄 楚 而 又 无 奈 的 吟 怨 ， 
就 像 那 受到 了 致命 伤害 的 秋 雁 ,悲哀 无 助 地 发 出 一 声 声 垂 死 的 鸣叫 。</p> 
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8 <p align = "right"> 或 许 , 这 便 是 花 儿 那 短暂 一 生 最 癌 凉 、 最 伤感 的 归宿 。</p> 
9 <p align = "center"> 而 美丽 苦 短 的 花期 </p> 

10 <p align= "left"> 却 是 那 最 后 悲伤 的 秋风 挽歌 中 的 瞬间 插曲 。</p> 

11 </body> 

12 </html> 


运行 结果 如 图 1-4-5 所 示 。 
































urren eT T EE Ee 
人 信介 #ie///C/Users/study/Desktop/W8EX263e%20(2)/ackground.html 
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声 委 死 的 鸣叫 。 








或 许 ， 这 便 是 花 儿 那 短暂 一 生 最 姜 凉 、 最 伤感 的 归宿 。 
而 美丽 苦 短 的 花期 
却 是 那 最 后 翡 伤 的 秋风 挽歌 中 的 瞬间 插曲 。 


C > background.html | ə 测 计 分 各 控制 标签 | 
完成 
































1-4-5 段落 标签 设置 


1.4.4 字体 样式 标签 


本 节 将 学 习 对 文字 细节 修饰 的 字体 样式 标签 ,使 读者 能 够 把 握 HTML 的 各 种 字体 格 
式 的 变化 ,制作 更 为 专业 的 网 页 。 

1. 使 文字 加 粗 

< b > 标签 告诉 浏览 器 把 加 b 标签 的 文本 以 粗 体 方式 显示 给 浏览 者 。 对 于 所 有 浏览 器 
来 说 ,这 意味 着 要 把 这 段 文字 以 加 粗 方式 呈现 给 大 家 。 其 编写 代码 如 例 1-4-6 所 示 。 

例 1-4-6 设置 文字 加 粗 


<html> 
<head> 
<title> 文 字 加 粗 </title> 
</head> 
<body> 
这 段 文字 没有 加 粗 </br> 


m m Ó N p 











使 用 HTML 和 CSS 开 发 Web 网 站 














7 <b> 这 段 文字 加 粗 </b> 

8 </body> 

9 </html> 

PETE X] 1-4-6 所 示 。 这 段 文字 没有 加 粗 
运行 效果 如 图 所 万 这 段 文字 加 粗 

2. 使 文字 倾 儿 


<i></i> 斜 体 标签 元 素 告诉 浏览 器 把 加 i 标签 的 文本 以 斜 ” 图 146 设置 文字 加 粗 


体 方式 显示 给 浏览 者 。 对 于 所 有 浏览 器 来 说 ,这 意味 着 要 把 这 段 文 字 以 加 斜体 样式 呈现 给 
大 家 。 其 编写 代码 如 例 1-4-7 所 示 。 
例 1-4-7 设置 文字 倾斜 


1 <html> 

2 <head> 

3 </head> 

4 < body> 

5 这 段 文字 没有 倾斜 </br> 

6 <i> 这 段 文字 有 倾斜 </i> 

7 </body> 

8 </html> 
这 段 文字 没有 倾斜 运行 效果 如 图 1-4-7 所 示 。 
2833668 3. 文字 下 画 线 

图 1-4-7 设置 文字 倾斜 <u></u> 下 夯 线 标签 告诉 浏览 器 把 加 u 标签 的 文本 以 加 


下 夯 线 样式 呈现 给 浏览 者 。 对 于 所 有 浏览 器 来 说 ,这 意味 着 要 
把 这 段 文字 以 加 下 画 线 样式 呈现 给 大 家 。 其 编写 代码 如 例 1-4-8 所 示 。 
例 1-4-8 设置 文字 加 粗 


1 <html> 

2 <head> 

3 </head> 

4 <body> 

5 这 段 文字 没有 下 画 线 </br> 

6 <u> 这 段 文字 有 下 画 线 </u> 

7 </body> 

8 </html> 

运行 效果 如 图 1-4-8 所 示 。 这 段 文字 没有 下 画 线 
这 段 文字 有 下 画 线 





1.4.5 水 平 线 标签 


顾名思义 ,水平线 标签 标示 一 条 水 平 线 , 注 意 该 标签 比 
较 特殊 ,没有 结束 标签 ,直接 使 用 < hr/> 表 示 标 签 的 开始 和 结束 。 例 如 ,为 了 让 版 面 更 加 
清晰 直观 ,可 以 在 歌 名 和 歌词 中 间 加 一 条 水 平分 割 线 。 对 应 的 HTML 代码 如 示例 1-4-9 
所 示 。 


图 1-4-8 设置 文字 下 画 线 
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例 1-4-9 ”水平线 标签 设置 


1 <html> 

2 <head> 

3 </head> 

4 < body> 

5 < h1 > 北京 欢迎 你 </hl > 

6 <hr/> 

7 <p> 北 京 欢 迎 你 ,有 梦想 谁 都 了 不 起 !</p> 
8 <P> 有 勇气 就 会 有 奇迹 .</p> 

9 </body> 

10 </html> 


其 运行 效果 如 图 1-4-9 所 示 。 


北京 欢迎 你 





北京 欢迎 你 ， 有 梦想 谁 孝 了 不 起 ! 
有 勇气 就 会 有 奇迹。 


图 1-4-9 水 平 标签 设置 


1.4.6 标题 标签 


标题 标签 标示 一 段 文 字 的 标题 (主题 ) ,并 且 支 持 多 层次 的 内 容 结构 。 例 如 ,一 级 标题 采 
用 < hl >, 如 还 有 二 级 标题 则 采用 < h2 >, 其 他 依次 类 推 。HTML 提供 了 六 级 标题 ,并 赋予 
了 标题 一 定 的 外 观 ; 所 有 标题 字体 加 粗 ,<hl > 字号 最 大 ,<h6 > 字号 最 小 。 上 节 的 例子 中 就 
用 到 了 hl 标签 。 例 1-4-10 中 展示 各 级 标题 对 应 的 HTML 代码 。 

例 1-4-10 ”标题 标签 


1 <html> 

2 <head> 

3 <title> 不 同等 级 标题 的 标签 对 比 </title> 
4 </head> 

3 <body> 

6 < hl > 一 级 标题 </hl > 
7 < h2 > 二 级 标题 </h2 > 
8 < h3 > 三 级 标题 </h3 > 
9 < h4 > 四 级 标题 </h4 > 
10 <h5 > 五 级 标题 </h5 > 
11 < h6 > 六 级 标题 </h6 > 
32 </body> 

13 </html> 


其 运行 效果 如 图 1-4-10 所 示 。 
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一 级 标题 
二 级 标题 

三 级 标题 

四 级 标题 

五 级 标 是 


图 1-4-10 标题 标签 


1.4.7 图 像 标签 


HTML 中 ,图 像 是 由 < img > 标签 定义 的 。< img > 是 空 标签 ,意思 是 说 , 它 只 拥有 属性 ， 
而 没有 结束 标签 。 想 要 在 页 面 上 显示 一 个 图 像 ,需要 使 用 src 属性 。src 表示 “ 源 ” 的 意思 。 
sre 属性 的 值 是 所 要 显示 图 像 的 URL, alt 属性 在 浏览 器 装载 图 像 失 败 时 告诉 用 户 所 丢失 
的 信息 ,此 时 ,浏览 器 显示 这 个 “交互 文本 ”来 代 蔡 图 像 。 这 样 ,即使 图 像 无 法 显示 ,用 户 还 是 
可 以 看 到 网 页 丢失 的 信息 内 容 , 所 以 在 制作 网 页 时 一 般 推荐 和 “src” 配 合 使 用 。 使 用 title 属 
性 ,还 可 以 提供 额外 的 提示 或 帮助 信息 ,其 HTML 代码 如 例 1-4-11 所 示 。 

例 1-4-11 图 像 标 签 


1 <html> 

2 <head> 

3 </head> 

4 <body> 

5 < img src = "qq. jpg" width = "159" height = "133" alt = "阿玛尼 男女 情侣 手表 ， 
6 “本 店 推荐 商品 ”title= "阿玛尼 男女 情侣 手表 , 本 店 推荐 商品 "> 

7 </br > 这 里 是 图 片 标签 

8 </body> 

9 </html> 


运行 效果 如 图 1-4-11 所 示 。 

注意 : 

设计 和 制作 网 页 时 ,需要 从 方便 用 户 使 用 的 角度 考虑 问题 。 用 
户 体验 越 来 越 成 为 Web 设计 和 开发 需要 考虑 的 重要 因素 ,用 户 体验 
的 原则 就 是 以 用 户 为 中 心 ,并 体现 在 细致 之 处 。 例 如 ,使 用 < img > 标 
签 时 ,强烈 推荐 同时 使 用 alt 和 title 属性 ,避免 因 网 速 太 慢 或 路 径 错 
误 带 来 的 “一 片 空白 ”或 “错误 ”提示 ; 同时 ,增加 的 鼠标 提示 信息 也 ”图 1-4-11 图 片 链接 
方便 用 户 使 用 。 


1.4.8 超 链 接 标签 
超 链 接 是 由 源 端 点 到 目标 端点 的 一 种 跳 转 。 源 端点 可 以 是 网 页 中 的 一 段 文本 或 一 幅 图 





这 里 是 图 片 标签 
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像 等 。 目标 端 点 可 以 是 任意 类 型 的 网 络 资源 ,例如 可 以 是 一 个 网 页 ,一 幅 图 像 、 一 首 歌曲 、 
段 动画 或 一 个 程序 等 。 

按照 目标 端点 的 不 同 , 可 以 将 超 链 接 分 为 以 下 几 种 形式 。 

(1) 文件 链接 : 这 种 链接 的 目标 端点 是 一 个 文件 , 它 可 以 位 于 当前 网 页 所 在 的 服务 器 ， 
也 可 以 位 于 其 他 服务 器 。 

(2) 锚 点 链接 : 这 种 链接 的 目标 端点 是 网 页 中 的 一 个 位 置 ,通过 这 种 链接 可 以 从 当前 
网 页 跳 转 到 本 页 面 或 其 他 页 面 中 的 指定 位 置 。 

(3) E-mail 链接 : 通过 这 种 链接 可 以 启动 电子 邮件 客户 端 程序 (如 Outlook 或 Foxmail 
等 ) ,并 允许 访问 者 向 指定 的 地 址 发 送 邮件 。 

下 面 介 绍 这 几 种 链接 的 方式 。 

1. 文件 链接 (同一 服务 器 ) 

格式 : <a href 二 "register/register. html">[ 免 费 注 册 ]</a> 

代码 范例 如 例 1-4-12 所 示 。 

例 1-4-12 页 面 间 的 链接 





<html> 
<head> 
<title > 链接 到 其 他 页 面 </title> 
</head> 
<body> 
<A href = "register/register. html">[ 免 费 注册 ]</A> 
<A href = "login/login. htm">[ 登 录 ]</A> 
</body> 
</html> 


o m° 3 O mn 8 wne 


其 运行 效果 如 图 1-4-12、 图 1-4-13 所 示 。 
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1-4-12 ” 跳 转 前 的 超 链 接 效 果 1-4-13” 跳 转 后 的 超 链接 效果 
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说 明 : 

href= "register/register. html" 是 链接 的 地 址 ,[ 免 费 注 册 ] 是 链接 内 容 , 链 接 的 地 址 又 
分 为 相对 路 径 和 绝对 路 径 : 相对 路 径 是 指定 从 根 目 录 到 文件 的 完整 路 径 ; 绝对 路 径 是 指定 
相对 于 当前 文件 的 文件 位 置 。 例 如 链接 到 同一 目录 (C:\HTML) 下 的 页 面 ,相对 路 径 可 编 
写 <a href = "Docl. htm">, 绝 对 路 径 可 编写 <a href = "C:\html\Doc2. htm">。 

2. 文件 链接 (其 他 服务 器 ) 

格式 : <a href= "http://www. huaruiedu. com/"> 链 接 到 外 部 华 瑞 网 站 </a > 

代码 范例 如 例 1-4-13 所 示 。 

例 1-4-13 文件 链接 (其 他 服务 器 ) 


<html> 
<head> 
</head> 
< body> 
<a href = "http://www. huaruiedu. com/"> 链 接 到 外 部 华 瑞 网 站 </a> 
</body> 
</html> 


voun wne 


其 运行 效果 如 图 1-4-14, Al 1-4-15 所 示 。 
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图 1-4-14 跳 转 前 的 效果 1-4-15 ” 跳 转 后 的 效果 


说 明 : 

在 大 多 数 网 页 浏览 器 上 输入 地 址 时 可 以 省 略 前 面 的 http://。 然 而 ,在 网 页 上 的 
<a href > 链接 中 输入 地 址 时 不 能 省 略 。 

3. 锚 点 链接 

锚 点 标签 用 于 使 用 户 * 跳 "到 文档 的 某 个 部 分 。 

其 用 法 : 


<a href ="#helpme">[ 新 人 上 路 ]</A> 
<a nane = "helpme"> 新 人 上 路 指南 </A> 
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代码 范例 如 例 1-4-14 所 示 。 
例 1-4-14 文件 链接 (其 他 服务 器 ) 


1 <html> 

2 <head> 

3 </head> 

4 < body> 

5 <a name = "top"></a> 这 是 文档 的 顶部 < br/> 

6 <a href = " 井 bottom"> 到 底部 </a> 

7 我 们 用 换行 标记 模拟 长 HTML 页 面 的 效果 

8 <br><br><br><br><br><br><br><br><br><br> 
= <br><br><br><br><br><br><br><br><br><br> 
10 <br><br><br><br><br><br><br><br><br><br> 
11 <a name = "bottom"></a> 这 是 文档 的 底部 < br/> 

12 <a href = "#top"> 到 顶部 </a> 

13 </body> 

14 </html> 


其 运行 效果 如 图 1-4-16、 图 1-4-17 所 示 。 






































































外 CNUsers\study\Desktop\ 新 于 文件 .. E CsersstudNDestop urate. l zamn) 
© |) cNuserseudype ~ | + | x | 器 Bin i = (E) fle///C/Users/stu v AEEA x| EE Bin 
le A ly 5 lat [5 e muna v >. 
f CAUsers\study\Deskt. | | Ë ~ sai [fÉ CAUsersAstudy Desk... m - 
这 是 交 档 的 顶部 f ü" 
用 换 行 标记 模拟 长 HTIL 页面 的 效果 
这 是 文档 的 底部 
到 项 部 
于 计算 机 | 保护 模式 :村 用 fa + R100% ~ A 计算 机 | 保护 模式 :大 用 (Q v R100% ~ 
图 1-4-16 跳 转 前 的 效果 图 1-4-17 跳 转 后 的 效果 
说 明 : 
<a href=" # bottom"> 到 底部 </a > 这 名 代码 的 意思 是 链接 到 锚 标记 所 在 位 置 ,< a 


ee br/> 这 名 代码 的 意思 是 定义 锚 标 记 。 要 先 定义 锚 标 
记 , 后 使 用 链接 。 

4. 空 链接 

空 链接 默认 返回 顶端 ,其 格式 : 

<a href = " 井 "> 返回 顶端 </a> 

5. E-mail 链接 

要 链接 电子 邮件 ,可 在 链接 标签 中 插入 mailto: 邮 箱 地 址 。 
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其 格式 : 
<a href = "mailto:webmaster(@ sohu. com"> 站 长 信箱 </a> 


代码 如 例 1-4-15 所 示 。 
例 1-4-15 E-mail 链接 


onou wne 


<html> 

<head> 

<title> 电 子 邮件 链接 </title> 

</head> 

<body> 

<a href = "mailto: taobaoWebMater@ taobao. com "> 站 长 信箱 </a> 
</body> 

</html> 


其 运行 效果 如 图 1-4-18, K 1-4-19 所 示 。 


ETT 编辑 EE) 视图 WD MAV 格式 四 ) Tav 
` 8 Q wow #RQD 


iaol 0 -gya r gl rm 
CRA | taobaorebhater@t aobao com 

















主题 ; 

















idg a a EE 











图 1-4-18 ” 跳 转 前 的 效果 图 1-4-19 ” 跳 转 后 的 效果 


说 明 : 
href 二 "mailto:taobaoWebMater(@taobao. com 这 里 可 以 填 任 何 正确 的 电子 邮箱 地 址 。 


总 结 


Web 是 运行 在 互联 网 上 的 一 种 服务 , 它 以 网 页 的 方式 让 浏览 者 获取 信息 。 

HTML 是 制作 Web 网 页 的 语言 , 它 用 标签 告诉 浏览 器 网 页 的 结构 和 内 容 。 
<html></html > 是 网 页 源 代码 中 最 外 层 的 标签 。 

网 页 一 般 由 头 部 和 正文 两 部 分 组 成 , 头 部 的 标签 是 < head ></head >, 正 文 的 标签 是 
< body ></body >, 

网 页 的 头 部 可 以 有 标题 标签 < title ></title >, 

网 页 中 背景 的 相关 设置 ,包括 背景 图 片 .背景 颜色 等 。 

网 页 正文 内 部 的 网 页 元 素 常用 的 有 超 链接 < a></a>、 图 像 < img/>、 标 题 < hl ></hl > 
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至 <h6 ></h6 >、 换 行 < br/>、 段 落 < p></p>、 字 体 < font ></font >、 水 平分 割 线 


<hr/>, 
课 后 习题 
(1) 在 HTML 中 ,下 面 ( ) 不 属于 HTML 文档 的 基本 组 成 部 分 。( 选 择 一 项 ) 
A. <style></style> B. <body>< body> 
C. <html></html > D. <head>< head> 


(2) 在 HTML 页 面 中 ,使 用 < img > 标签 插入 图 像 ,下 列 选项 中 关于 < img > 标签 的 属性 
说 法 错误 的 是 ( ) 。( 选 择 一 项 ) 
A. <img > 标签 的 href 属性 指定 图 像 源 文件 所 在 的 路 径 
B. < img > 标签 的 alt 属性 指定 提示 文字 的 内 容 
C. <img > 标签 的 width 属性 指定 图 像 的 宽度 
D. <img > 标签 的 height 属性 指定 图 像 的 高 度 
(3) 在 HTML 中 ,下 列 标签 中 的 ( ) 标 签 在 标记 的 位 置 强制 换行 。( 选 择 一 项 ) 
A. < HI1l > B. <P> 
C. <BR> D. <HR> 
(4) 在 HTML 中,( ) 可 以 在 网 页 上 通过 链接 直接 打开 客户 端的 发 送 邮件 工具 发 送 
电子 邮件 。( 选 择 一 项 ) 
A. <a href= "telnet:zhangming(@aptech. com"></a > 
B. <a href= "mail:telnet:zhangming(@@aptech. com"></a > 
C. <a href= "ftp:telnet:zhangming@aptech. com"></a > 
D. <a href= "mailto; telnet:zhangming@aptech. com"></a > 
(5) 如 果 在 catalog. htm 中 包含 如 下 代码 , 则 该 HTML 文档 在 IE 浏览 器 中 打开 后 ,用 
户 单 击 此 链接 将 (  )。( 选 择 一 项 ) 
<a href = " 井 novel'> 小 说 </a> 


A. 使 页 面 跳 转 同一 文件 夹 下 名 为 “nove. html” hy HTML 文档 
B. 使 页 面 跳 转 到 同一 文件 夹 下 名 为 “小 说 . html” hy HTML 文档 
C. 使 页 面 跳 转 到 catalog. htm 中 名 为 “novel” 的 锚 点 处 
D. 使 页 面 跳 转 到 同一 文件 夹 名 为 “小 说 . html” J HTML 文档 中 名 为 “novel” 的 锚 
(6) 要 在 网 页 中 显示 如 下 文本 ,要 求 字体 类 型 为 隶书 ,字体 大 小 为 6, 则 下 列 HTML 代 
码 正确 的 是 ( )。 (选择 一 项 ) 


欢迎 访问 我 的 主页 ! 


A. <p>< font size=6 fype 王 "隶书 "> 欢迎 访问 我 的 主页 ! </font> 
B. <p>< font size= +2 face 王 "隶书 "> 欢迎 访问 我 的 主页 ! </font> 
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C. <p><font size 一 6 face 一 "隶书 "> 欢迎 访问 我 的 主页 ! </font> 
D. <p>< font size 一 十 3 style 一 "隶书 "> 欢迎 访问 我 的 主页 ! </font> 
(7) 在 HTML 页 面 中 ,< marquee > 滚动 标签 的 direction 属性 表示 滚动 的 方向 , 它 的 取 
值 可 能 为 (  )。( 选 择 一 项 ) 


A. up B. down 
C. left D. right 
(8) 默认 情况 下 ,在 HTML 文档 中 使 用 ( ) 标 签 绘制 水 平 线 。( 选 择 一 项 ) 
A. <pre> B. <ul> 
C. <hr> D. <ol> 
(9) 在 HTML 中 ,下 列 选项 中 的 ( ) 段 HTML 代码 可 以 实现 下 图 的 效果 。( 选 择 


一 项 ) 


F C:\Documents ro) x] 


清明 时 节 雨 纷纷 ， 路 上 行人 欲 断 魂 。 


借 问 酒家 何 处 有 ? 牧童 遥 指 可 花村 。 





A. < p align="right"> 
清明 时 节 雨 纷纷 ,路 上 行人 和 欲 断 魂 。 
<palign= "right"> 
借 问 酒家 何 处 有 ? 牧童 遥 指 杏 花 村 。 

B. < p align="left"> 
WE R e EITA RKE o 
< p align="left"> 
借 问 酒家 何 处 有 ? MEEKER. 

C. < p align="center"> 
清明 时 节 雨 纷纷 ,路 上 行人 和 欲 断 魂 。 
< p align="center"> 
借 问 酒家 何 处 有 ? MRE ER o 

D. < p align=left > 
清明 时 节 雨 纷纷 ,路 上 行人 欲 断 魂 。 
借 问 酒家 何 处 有 ? 牧童 遥 指 可 花村 。 
</p> 

(10) 在 HTML 中 ,要 将 图 片 pic01. gif 插入 网 页 中 ,图 片 的 具体 信息 描述 如 下 : 图 片 的 
相对 路 径 为 /images/pic01. gif, 宽 : 120px, 高 : 130px, 边 框 : 1px, 则 以 下 ( ”) 段 HTML 
代码 能 够 实现 。( 选 择 一 项 ) 
A. < image src=" /images/pic01. gif"height="120" width="130" border="1"> 
B. < image floder=" /images/pic01. gif"height="120" width="130" border="1"> 
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C. < image src=" /images/pic01. gif"height="130" width="120" border="1"> 
D. < image floder=" /images/pic01. gif"height="130" width="120" border="1"> 
(11) 请 用 HTML 设计 如 下 图 所 示 效 果 的 文档 。 


旅途 


AEZ — KiE 
无 论 这 条 路 是 长 还 是 短 





PKB- AUR SEBE 下 去 


充实 自己 
充实 生活 
永远 善待 生活 
用 自己 最 大 的 热情 
歌唱 人 生 之 歌 


Bukiet 
ERE 
ZEA: E 
坐 上 了 一 辆 幸福 的 列车 
驶 向 明天 
驶 向 未 来 


(12) 请 用 HTML 设计 如 下 图 所 示 效 果 的 文档 。 
持之以恒 ， 谁 也 不 能 随 随便 便 成 功 


发 布 : 2009-4-24 14:29:07 点 击 : (118) 


200901 期 09 班 张 靖 


学 习 日 语 已 将 近 一 个 月 ， 现 在 正 处 于 一 个 入 门 阶段 ， 学 习 方 法 对 我 们 来 说 很 重要 。 下 面 ， 我 来 稍微 说 
说 自己 在 这 一 个 月 里 是 怎样 对 待 日 语 的 学 习 的 。 

首先 ， 要 端正 态度 。 现 在 学 习 日 语 是 我 们 自己 的 事 ， 要 有 渴望 去 学 习 的 热情 ， 而 不 是 完成 老师 给 的 任 
务 就 可 以 了 。 目 前 我 们 的 课程 实 排 得 相当 紧 ， 每 天 要 接受 很 多 新 的 单词 ， 还 有 语法 。 所 以 要 充分 地 做 好 复 
习 和 习 工 作 。 课 上 要 打 起 十 二 分 的 精神 跟着 老师 的 步伐 ， 稍 不 留神 就 有 可 能 掉队 ， 这 就 需要 提前 做 好 必 
要 的 有 习 。 课 后 ， 把 学 过 的 单词 和 语法 再 回顾 一 下 ， 要 做 到 对 今天 所 学 的 内 容 没 有 任何 疑惑 ， 所 谓 温 故 而 
知 新 嘛 ! 我 们 都 在 抱怨 课程 实 排 得 太 紧 ， 但 是 学 习 这 件 事 ， 不 是 缺乏 时 间 ， 而 是 缺乏 努力 ， 课 程 既然 这 样 实 
排 ， 就 肯定 有 它 存在 的 道理 ， 此 时 学 习 的 苦 只 是 暂时 的 ,而 未 学 到 的 痛苦 相信 我 们 有 些 人 已 有 所 体会 。 

另外 ,还 有 很 重要 的 一 点 ， 就 是 信心 ， 你 要 相信 自己 一 定 能 够 把 日 语 学 好 ， 持 之 以 恒 ， 谁 也 不 能 随 随 
便便 成 功 ， 它 来 自 彻底 的 自我 管理 和 贺 力 。 

最 后 , 祝 所 有 同仁 都 顺利 毕业 ， 并 取得 成 功 。 
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(13) 编写 如 下 图 效果 对 应 的 HTML 代码 。 





oft Internet Explorer [=] x] 


1. Windows Me 


2. Windows 2003 
e Windows Server 2003 Web 
e Windows Server 2003 Standard 
e Windows Server 2003 Enterprise 
e Windows Server 2003 Datacenter 
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表格 与 列表 人 





名 理解 表格 的 结构 

名 掌握 表格 相关 的 标签 

名 掌握 单元 格 合并 

如 理解 列表 的 分 类 

名 掌握 两 种 列表 及 列表 项 目的 标签 





请 在 预习 时 学 会 下 列 单词 的 含义 和 发 音 , 并 填写 在 横 线 处 。 
. table; 





row: 





cell; 





. align: 
. border: 
. caption: 
. width: 


. vertical; 

















° @ — @ m = Q rs = 


. column: 





10. item: 





2.1 表格 基础 


表格 是 块 状元 素 ,发 明 该 标签 的 初衷 是 用 于 显示 表格 数据 。 例 如 学 校 中 常见 的 考试 成 
绩 单 .选修 课表 ,企业 中 常见 的 工资 账单 等 。 
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2.1.1 为 什么 要 使 用 表格 

1. 简单 通用 

表格 行列 结构 简单 , 且 在 生活 中 被 广泛 使 用 ,因此 对 它 的 理解 和 编写 都 是 很 方便 的 。 

2. 结构 稳定 

表格 每 行 的 列 数 通常 一 致 ,同行 单元 格 高 度 一 致 且 水 平 对 齐 , 同 列 单元 格 宽度 一 致 且 垂直 
对 齐 。 这 种 严格 的 约束 形成 了 一 个 不 易 变 形 的 长 方形 盒子 结构 , 堆 释 排列 起 来 结构 很 稳定 , 基 
于 以 上 两 点 ,表格 在 网 页 技术 发 展 的 初中 期 就 被 广泛 应 用 于 论坛 .政务 网 站 和 咨询 网 站 中 。 


2.1.2 表格 的 基本 结构 
先 看 一 看 表格 的 基本 结构 ,表格 是 由 指定 数目 的 行 和 列 组 成 的 ,其 基本 结构 如 图 2-1-1 
所 示 ,其 中 的 文字 或 图 片 按照 相应 的 列 或 行进 行 分 类 和 显示 。 
表格 列 


⁄ PSS 














表格 行人 于 单元 格 























图 2-1-1 表格 基本 结构 


1. 单元 格 

表格 的 最 小 单位 ,一 个 或 多 个 单元 格 纵横 排列 组 成 了 表格 。 

2. ff 

一 个 或 多 个 单元 格 横向 堆 释 形成 了 行 。 

3. 列 

由 于 表格 单元 格 的 宽度 必须 一 致 ,所 以 单元 格 纵向 划分 形成 了 列 。 


2.1.3 表格 的 基本 语法 


创建 表格 的 基本 语法 如 下 。 
<table> 
<tr> 


< td>% 1 个 单元 格 的 内 容 </td> 
<td> 第 2 个 单元 格 的 内 容 </td> 
</tr> 
<tr> 
<td> 第 1 个 单元 格 的 内 容 </td> 
<td> 第 2 个 单元 格 的 内 容 </td> 
</tr> 
</table> 


创建 表格 一 般 分 为 下 面 三 步 。 
第 一 步 : 创建 表格 标签 < table >……</table >。 
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第 二 步 : 在 表格 标签 < table >…… </ table > 里 创建 行 标签 < tr >…… </tr>, 可 以 有 多 个 
单元 格 。 

第 三 步 : 在 行 标签 < tr >……</tr > 里 创建 单元 格 标签 < td >……</td >, 可 以 有 多 个 单 
元 格 


为 了 显示 表格 的 轮廓 ,一 般 还 需要 设置 < table > 标签 的 border 边框 属性 ,指定 边框 的 
宽度 。 

例如 ,在 页 面 中 添加 一 个 2 行 3 列 的 表格 ,对 应 的 HTML 代码 如 示例 2-1-1 所 示 。 

例 2-1-1 创建 表格 


1 <html> 

2 <head> 

3 <title> 基 本 表格 </title> 

4 </head> 

5 <body> 

6 < table border = "2"> 

T < kr> 

8 <td>1 行 1 列 的 单元 格 </td> 
9 <td>1 fT 2 列 的 单元 格 </td> 
10 <td>1 行 3 列 的 单元 格 </td> 
11 </tr> 

12 <tr> 

13 <td>2 行 1 列 的 单元 格 </td> 
14 <td>2 fT 2 列 的 单元 格 </td> 
15 <td>2 行 3 列 的 单元 格 </td> 
16 </tr> 

17 </table> 

18 </body> 

19 </html> 


其 运行 效果 如 图 2-1-2 所 示 。 


E G P. EX 


Ske err exe ?1 


| * Gss EE = | z 








上 1 行 1 列 的 单元 格 1 行 2 列 的 单元 格 [1 行 3 列 的 单元 格 


[2 行列 的 单元 格 |2 行 2 列 的 单元 格 2 行 3 列 的 单元 格 








于 计算 机 | 保护 檬 式 : 禁用 € ~ Rioo% ~ 


图 2-1-2 创建 表格 


2.2 ”跨行 跨 列 的 表格 


上 节 介 绍 了 简单 表格 的 创建 ,而 现实 中 往往 需要 较 复杂 的 表格 ,有 时 候 就 需要 把 多 个 单 
元 格 合并 为 一 个 单元 格 ,也 就 是 要 用 表格 的 跨行 跨 列 功能 。 
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2.2.1 跨 列 
跨 列 是 指 单元 格 的 横向 合并 ,语法 如 下 。 


<table> 
<tr> 
< td colspan = "所 跨 的 列 数 "> 单元 格 内 容 </td> 
</tr> 
</table> 


col 为 column( 列 ) 的 缩写 ,span 为 跨度 ,所 以 colspan 意思 为 跨 列 。 下 面 通过 例 2-2-1 
来 说 明 colspan 属性 的 用 法 。 
例 2-2-1 跨 列 


<html> 
<head> 
<title> 跨 多 列 的 表格 </title> 
</head> 
<body> 
< table border = "1" width = "200"> 
<tr> 
< td colspan = "2"> 学 生成 绩 </td> 
</tr> 
0 Er 
11 < td> 语 文 </td> 
12 <td>98</td> 
13 </tr> 
14 <tr> 
15 <td> 数 学 </td> 
16 <td>95 </td> 
37 </tr> 
18 </table> 
19 </body> 
20 </html> 
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其 运行 效果 如 图 2-2-1 所 示 。 

















a 计算 机 | 保护 模式 村 组 + R100% ~ 


图 2-2-1 跨 列 
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2.2.2 跨行 
跨行 是 指 单元 格 在 垂直 方向 上 合并 ,语法 如 下 。 





<table> 
<tr> 
< td rowspan = "所 跨 的 行 数 "> 单元 格 内 容 </td> 
</tr> 
</table> 


row 为 行 的 意思 ,rowspan 即 跨行 。 下 面 通过 例 2-2-2 来 说 明 colspan 属性 的 用 法 。 
例 2-2-2 跨行 


1 <html> 

2 <head> 

3 <title> 跨 多 列 的 表格 </title> 
4 </head> 

5 <body> 

6 < table border = "1" width = "500"> 
T: 

8 

9 


<tr> 
< td rowspan = "2"> 张 三 </td> 
<td> 语 文 </td> 

10 <td>98</td> 
11 </tr> 
12 <tr> 
13 <td> 数 学 </td> 
14 <td>95 </td> 
15 </tr> 
16 <tr> 
17 < td rowspan = "2"> 李 四 </td> 
18 <td> 语 文 </td> 
19 <td> 88</td> 
20 </tr> 
21 ee 
22 <td> 数 学 </td> 
23 <td> 91</td> 
24 </tr> 
25 </table> 
26 </body> 
27 </html> 


其 运行 效果 如 图 2-2-2 所 示 , 

注意 : 

一 般 而 言 ,跨行 或 跨 列 操作 时 ,需要 以 下 两 个 步骤 。 

(1) 在 需 合 并 的 第 一 个 单元 格 ,设置 跨 列 或 跨行 属性 ,如 colspan= "3", 

(2) 删除 被 合并 的 其 他 单元 格 , 即 把 某 个 单元 格 看 成 多 个 单元 格 合并 后 的 单元 格 。 
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图 2-2-2 跨行 


2.2.3 跨行 、 跨 列 


有 时 表格 中 既 有 跨 列 又 有 跨行 的 情况 ,如 例 2-2-3 所 示 。 
fJ 2-2-3 跨行 、 跨 列 
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<html> 
<head> 


<title> 跨 多 行 多 列 的 表格 </title> 


</head> 
<body> 


< table border = "1" width = "200"> 

<tr> 
< td colspan = "3"> 学 生成 绩 </td> 

</tr> 

<tr> 
< td rowspan = "2"> 张 三 </td> 
<td> 语 文 </td> 
<td>98</td> 

</tr> 

ES i 
<td> 数 学 </td> 
<td>95 </td> 

</tr> 

<tr> 
< td rowspan = "2"> 李 四 </td> 
<td> 语 文 </td> 
<td> 88</td> 

</tr> 

<tr> 
< td> 数 学 </td> 
<td>91</td> 

</tr> 

</table> 


</body> 
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运行 结果 如 图 2-2-3 所 示 。 























图 2-2-3 跨行 . 跨 列 


注意 

跨行 和 跨 列 以 后 ,并 不 改变 表格 的 特点 ,同行 的 总 高 度 一 致 , 同 列 的 总 宽度 一 致 。 因 此 ， 
表格 中 各 单元 格 的 宽度 或 高 度 互 相 影 响 , 结 构 相 对 稳定 ,但 缺点 是 不 能 灵活 地 进行 布局 
控制 。 


2.3 表格 的 高 级 用 法 


除了 设置 表格 跨行 和 跨 列 外 ,还 可 以 为 整个 表格 添加 标题 ,对 表格 数据 分 组 等 ,从 而 实 
现 企业 中 常见 的 年 度 统计 报表 等 复杂 表格 。 
如 何 实现 上 述 效果 ? HTML 提供 了 如 下 表格 标签 ,对 应 的 含义 如 图 2-3-1 所 示 。 





[| | 8-0-5 @ + mo- s297 Imo @- ”" 
年 终 数据 报表 








IKA (RMB) 











2-3-1 高 级 标签 


1. 表格 标题 < caption > 

用 于 描述 整个 表格 的 标题 。 

2. 表格 表 头 <th> 

用 于 定义 表格 的 表 头 ,一 般 是 表格 的 第 一 行 数据 ,以 粗 体 、 居 中 的 方式 显示 。 
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3. 表格 数据 的 分 组 标签 < thead >,< tbody > 及 < tfooter > 


这 3 个 标签 一 般配 合 使 用 ,主要 是 对 报表 数据 进行 逻辑 分 组 ,< thead > 对 应 报表 的 页 
眉 , 即 表格 的 表 头 部 分 ;<tbody > 对 应 报表 的 数据 主体 , 即 详细 的 数据 描述 部 分 ; < tfooter > 
对 应 报表 的 页 脚 , 即 对 各 分 组 数据 进行 汇总 的 部 分 。 各 分 组 标签 内 由 多 行 < tr > 组 成 。 
区 分 各 部 分 的 数据 ,可 以 利用 style 样式 属性 分 别 为 < thead >、< tbody >.< tfooder > 设 


为 了 


置 背 景 颜 色 。 同 时 ,为 了 使 整个 表格 的 宽度 充满 浏览 器 窗口 的 整 行 ,可 以 利 | 





置 表 格 宽度 为 "100% ”。 
图 2-3-1 对 应 的 HTML 代码 如 例 2-3-1 所 示 ,需要 说 明 的 是 ,宽度 .背景 色 等 样式 一 般 


应 放 在 专门 的 CSS 文件 中 ,此 处 仅 是 为 了 演示 页 面 效果 。 


例 2-3-1 高 级 标签 


1 <html> 

2 <head> 

3 <title > 等 分 组 用 法 </title> 

4 </head> 

5 < body> 

6 < table width = "100 % "> 

7 <caption> 年 终 数 据 报表 </caption> 

8 < thead style = "background: # 0FF"> 
g <tr> 

10 <th> 月 份 </th> 

11 <th> 收 入 (RMB)</th> 

12 </tr> 

13 </thead> 

14 < tbody style = "background: #9CC"> 
15 ciro 

16 <td>1 月 </td> 

17 <td>100</td> 

18 </tr> 

19 <tr> 

20 <td>2 月 </td> 

21 <td> 80 </td> 

22 </tr> 

23 <!-- 省 略 3-6 月 的 类 似 HTML 代码 --> 
24 </tbody> 

25 <tfoot style = "background: # FF0"> 

26 < br 

27 <td> 平 均 月 收入 </td> 

28 <td> 196.67 </td> 

29 </tr> 

30 <tr> 

31 <td> 总 计 </td> 

32 <td>1180</td> 

33 </tr> 

34 <! -- 省 略 3-6 月 的 类 似 HTML 代码 —— > 
35 </tfoot> 

















width 





属性 设 
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36 </table> 
37 </body> 
38 </html> 
2.4 列表 


在 制作 网 页 时 ,往往 会 遇 到 一 大 堆 杂 乱 无 章 的 材料 需要 整理 ,如 何 把 它们 用 清晰 .美观 
的 版 式 表现 出 来 ,这 就 要 用 到 HTML 语言 中 的 列表 标签 。 列 表 标签 是 一 个 很 重要 的 格式 
设置 方法 , 它 可 以 把 那些 具有 相同 属性 的 内 容 以 清晰 、 简 洁 、 易 于 阅读 的 方式 呈现 在 读者 面 
前 ,所 以 深 受 网 页 设计 者 的 喜爱 ,在 网 页 设计 中 得 到 了 广泛 的 应 用 。 

在 HTML 语言 中 共有 5 种 类 型 的 列表 : 无 序列 表 、 有 序列 表 、 定 义 列表 、 菜 单列 表 和 目 
录 列 表 , 常 用 的 有 无 序列 表 和 有 序列 表 。 下 面 分 别 对 这 几 种 列表 的 使 用 方法 进行 介绍 。 


2.4.1 无 序列 表 


无 序列 表 可 用 来 排列 无 特定 顺序 的 内 容 , 各 个 列表 项 之 间 没 有 先后 顺序 之 分 , 它 通 常 使 
用 一 个 项 目 符号 来 标记 各 个 列表 项 ,常用 的 项 目 符号 有 圆圈 、 圆 点 和 方 点 。 

无 序列 表 的 HTML 标签 是 < ul >……</ul >, 它 有 一 个 type 属性 ,用 来 标记 每 一 个 列表 
项 前 所 用 的 项 目 符号 类 型 。 

type=disc 圆 点 (默认 值 ) 

type 一 circle 圆圈 

type= square 方 点 

在 无 序列 表 中 用 < li>……<V/li > 标签 来 标记 每 一 个 列表 项 ,下 面 几 种 列表 也 用 该 标签 
来 标记 列表 项 。 可 以 通过 例 2-4-1 来 看 看 效果 。 

例 2-4-1 无 序列 表 


1 <html> 

2 <head> 

3 <title> 无 序列 表 效果 </title> 
4 </head> 

5 <body> 

6 <ul type = "square"> 

7 <1i>< h3 > 无 序列 表 </h3 ></1i> 
8 <1i> 上 网 工具 </1i> 

9 <1i> 文 件 工具 </1i> 

10 <1i> 下 载 工 具 </1i> 

1i <li> EIR </li> 

12 </ul> 

13 </body> 

14 </html> 














其 运行 效果 如 图 2-4-1 所 示 。 
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。 TRIR 
。 上传 工 具 
图 2-4-1 无 序列 表 


2.4.2 有 序列 表 


有 序列 表 就 是 按照 一 定 的 排列 顺序 来 排列 内 容 , 各 个 列表 项 之 间 有 先后 顺序 之 分 , 它 通 
常 使 用 编号 来 标记 各 个 列表 项 ,可 以 根据 需要 选择 编号 的 类 型 和 起 始 号 码 。 

有 序列 表 的 HTML 标签 是 < ol >……</ol >, 其 中 的 type 属性 用 来 设置 每 一 个 列表 项 
前 所 用 的 标记 类 型 。 

type=1 阿拉 伯 数 字 1、2、3……( 默 认 值 ) 

type= A 大 写 英文 字母 A、B、C…… 

type=a 小 写 英文 字母 a、b、c*…… 

type= K5 BAF I M M- 

type=i 小 写 罗 马 字 母 iiiii…… 

start 属性 用 来 设置 编号 的 起 始 号 码 , 默 认 值 为 1。 对 于 不 同 的 type 属性 设置 ,start JR 
性 一 律 以 数字 表示 ,例如 对 于 一 个 type= A 的 有 序列 表 , 设 置 start 二 3, 该 列表 将 从 字母 c 
开始 往 下 排列 。 下 面 通过 例 2-4-2 来 看 看 效果 。 

例 2-4-2 有 序列 表 


1 <html> 
yA < head> 
3 <title> 有 序列 表 效果 </title> 
4 </head> 
5 <body> 
6 < ol type = "A"> 
7 <li type = "A">< h3> 有 序列 表 </h3></1i> 
8 <1i> 打 开 文件 菜单 </1i> 
9 <1i> 单 击 保存 命令 </1i> 
10 <1i> 出 现 保存 对 话 框 </1i> 
11 <1i> 重 新 命名 文件 名 </1i> 
12 <1i> 单 击 保 存 命令 </1i> 
13 </ol> 
14 </body> 
15 </html> 
其 运行 效果 如 图 2-4-2 所 示 。 A 有 序列 表 
2.4.3 定义 列表 B. 打开 文件 菜单 
C， 单 击 保存 命令 
定义 列表 一 般 用 来 定义 一 个 名 词 , 它 就 像 字典 中 解释 名 词 的 排列 É 出 现 保存 对 话 框 
命 
格式 一 样 ,名 词 都 是 靠 左 对 齐 , 对 名 词 的 解释 向 右 缩 进 排列 。 F. 单 击 保存 命 


定义 列表 的 HTML 标签 是 < dl >……</dl>, 其 中 各 列表 项 的 标 ”图 2-4-2 有 序列 表 
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ZH: 
< dt >……</dt > 表示 待 定义 的 名 词 
< dd >……</dd > 表示 对 名 词 的 解释 
下 面 通过 例 2-4-3 来 看 看 效果 。 
例 2-4-3 定义 列表 


<html> 
<head> 
<title > 定义 列表 效果 </title> 
</head> 
<body> 
定义 列表 
<dl> 
<dt><b> 横 幅 广 告 管理 器 </b></dt > 
<dd> 所 谓 横幅 广告 管理 器 实际 上 就 是 一 个 广告 看 板 , 它 将 多 幅 图 片 按照 一 定 的 顺序 
10 显示 出 来 ,就 像 我 们 常见 到 的 gif 动画 一 样 ,不 但 可 以 改变 图 片 之 间 的 时 间 间 隔 ,而 且 还 可 以 在 
11 各 幅 图 像 之 间 设 置 特 殊 的 过 渡 效 果 。</dd> 


ownoumewmnb hm 


12 </d1> 
13 </body> 
14 </html> 


其 运行 效果 如 图 2-4-3 PHS. 


定义 列表 
横幅 广告 管理 
RARS 告 管理 器 实际 上 就 是 一 个 广 
告 看 板 ， 它 将 多 幅 图 片 按照 一 定 的 顺序 


eee A 
证 可 以 在 各 由 图像 之 间 设 秆 特 
Sp tHEs%5 


图 2-4-3 ”定义 列表 





2.4.4 ”菜单 列表 


菜单 列表 在 浏览 器 中 的 显示 效果 和 无 序列 表 是 相同 的 ,menu 标签 是 成 对 出 现 的 ,以 
< menu > 开始 ,以 </menu > 结束 ,通常 用 于 设计 单列 的 菜单 列表 。 

其 语法 为 : 

<menu> 

<1i> 列 表 项 </1i> 

<1i> 列 表 项 </1i> 

<1i> 列 表 项 </1i> 


下 面 通过 例 2-4-4 来 看 看 效果 。 
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例 2-4-4 菜单 列表 


1 <html> 
z <head> 
3 <title> 定 义 列表 效果 </title> 
4 </head> 
5 <body> 
6 <b> 民 族 风情 </b> 
7 < menu > 
8 <li> 云南 旅游 布依 族 </li> 
9 < 1i> 云 南 旅游 景颇 族 </li> 
10 <1i> 云 南 旅游 泸沽 湖 介绍 </li> 
11 <1i> 云 南 旅游 傣族 泼水 节 </1i> 
12 <1i> 石 宝山 歌会 /1i> 
13 <1i> 普 米 族 节日 </1i> 
14 </menu> 
15 </body> 
16 </html> 
其 运行 效果 如 图 2-4-4 所 示 。 民族 风情 
说 明 I 。 云 南 旅游 布依 族 
在 该 语法 中 ,< menu > 和 </menu > 标示 着 菜单 列表 的 开始 和  _”。 云 南 旅游 景 版 族 
°. Zilla l ft: 
结 。 云南 旅游 傣族 羧 水 节 
。 石 宝山 歌会 
2.4.5 目录 列表 kosa 
图 2-4-4 菜单 列表 


通常 用 于 设计 一 个 多 列 的 目录 列表 ,用 来 显示 一 系列 的 列表 内 
容 。 目 录 列 表 的 HTML 标签 是 < dir >…… </dir >。 

菜单 列表 和 目录 列表 标签 与 无 序列 表 标签 的 用 法 基本 一 样 ,在 一 些 特别 的 浏览 器 中 
可 能 表现 出 有 序列 表 的 效果 。 由 于 菜单 列表 标签 和 目录 列表 标签 不 为 W3C 所 认可 ,所 
以 一 般 情况 下 不 要 使 用 ,而 代 之 以 无 序列 表 和 有 序列 表 , 这 样 可 以 保证 网 页 有 较 好 的 兼 
容 性 。 


2.5 ”制作 深 动 效果 


通过 前 面 的 学 习 , 我 们 已 经 能 够 很 好 地 控制 各 种 段落 文字 、 图 片 的 显示 方式 ,不 过 无 论 
怎么 设置 ,文字 和 图 片 都 是 静态 的 。 本 节 将 讲述 如 何 让 页 面 中 的 文字 和 图 片 滚动 起 来 ,并 且 
控制 其 滚动 效果 。 


2.5.1 滚动 文字 


marquee 标记 用 于 在 浏览 区 域 中 滚动 文字 。 这 个 标记 只 适用 于 IE3 以 后 版 本 的 浏览 
器 。 其 默认 从 右 向 左 循环 滚动 。 其 格式 为 < marquee > 文字 内 容 </marquee >。 下 面 编写 示 
例 2-5-1 来 看 看 其 效果 。 
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B 2-5-1 文字 滚动 效果 


1 <html> 

2 < head> 

3 <title> 文 字 滚动 效果 </title> 

4 </head> 

5 <body> 

6 文字 滚动 示例 (默认 ) : 

7 < marquee > 看 到 没 ,我 在 滚动 哟 !</marquee> 
8 </body> 

9 </html> 


运行 结果 如 图 2-5-1 所 示 。 


文字 滚动 示例 (默认 ) ， 
看 到 没 ， 我 在 滚动 哟 ! 


图 2-5-1 文字 滚动 效果 


2.5.2 设置 滚动 方向 


marquee 标签 的 direction 属性 用 于 设 定 活 动 字幕 的 滚动 方向 ,其 属性 值 有 down, left, 
right、up, 分 别 代表 向 下 、 向 左 、 向 右 、 向 上 ,其 代码 如 下 : 

<marquee direction = "down"> 设 定 活动 字幕 的 滚动 方向 向 下 </marquee> 

< marquee direction = "left"> 设 定 活动 字幕 的 滚动 方向 向 左 </marquee > 

< marquee direction = "right"> 设 定 活 动 字幕 的 滚动 方向 向 右 </marquee> 

< marquee direction = "up"> 设 定 活动 字幕 的 滚动 方向 向 上 </marquee> 


2.5.3 设置 滚动 其 他 属性 


marquee 标签 的 其 他 属性 说 明 如 下 : 

behavior 表示 滚动 的 方式 , 值 可 以 是 scroll( 连 续 滚 动 ) slide( 滑 动 一 次 ) „alternate (E 
返 滚 动 ) 。 

loop 表示 循环 的 次 数 , 值 是 正 整数 ,默认 为 无 限 循 环 。 

scrollamount 表示 运动 速度 , 值 是 正 整数 ,默认 为 6。 

scrolldelay 表示 停顿 时 间 , 值 是 正 整数 ,默认 为 0, 单位 是 毫秒 。 

align 表示 元 素 的 垂直 对 齐 方式 , 值 可 以 是 top middle, bottom, $R X middle, 

bgcolor 表示 运动 区 域 的 背景 色 , 值 是 十 六 进 制 的 RGB 颜色 ,默认 为 白色 。 

height width 表示 运动 区 域 的 高 度 和 宽度 , 值 是 正 整数 (单位 是 像素 ) 或 百分数 ,默认 
width=100% height 为 标签 内 元 素 的 高 度 。 

hspace、vspace 表示 元 素 到 区 域 边界 的 水 平 距离 和 垂直 距离 , 值 是 正 整数 ,单位 是 像素 。 

onmouseover= this. stop( ) onmouseout= this. start( ) 表 示 当 鼠标 在 以 上 区 域 时 滚动 
停止 , 当 鼠 标 移 开 时 又 继续 滚动 。 
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2.5.4 滚动 图 片 


制作 图 片 的 滚动 效果 和 文字 滚动 的 方法 一 样 ,同样 使 用 < marquee ></marquee > 标签 ， 
编写 格式 为 < marquee >< img src 二 "图 片 地 址 " /></marquee >, 

在 制作 滚动 图 片 时 ,marquee 标签 的 属性 也 是 有 效 的 ,其 编写 代码 如 例 2-5-2 所 示 。 

例 2-5-2 ”图片 滚动 效果 


T 
2 
3 
4 
5 
6 
7 
8 
9 


<html> 
<head> 
<title> 图 片 滚动 效果 </title> 
</head> 
<body> 
图 片 滚动 示例 
< marquee scrollamount = "10" direction = "up">< img src = "QQ. JPG"></marquee > 
</body> 
</html > 


运行 结果 如 图 2-5-2、 图 2-5-3 所 示 。 


图 片 滚动 示例 默认) : 图 片 滚动 示例 默认 ) ， 





图 2-5-2 图 片 滚动 效果 1 图 2-5-3 图 片 滚动 效果 2 


2.6 Jë 


2.6.1 层 的 基本 概念 


< div > 标签 在 Web 标准 的 网 页 中 使 用 非常 频繁 ,那么 相对 于 其 他 HTML 继承 而 来 的 
元 素 ,< div > 有 什么 特别 之 处 吗 ? 答案 令 人 失望 , 它 并 没有 什么 特性 ,一定 要 说 其 特性 ,不 过 
就 是 一 种 块 级 元 素 。 正 因为 < div > 没有 任何 特性 ,所 以 更 容易 被 CSS 控制 样式 。 

< div > 标签 可 以 把 文档 分 割 为 独立 的 ,不 同 的 部 分 。 它 可 以 作 内 容 的 组 织 工具 ,并 且 不 
使 用 任何 格式 与 其 关联 。 

在 没有 CSS 样式 的 帮助 下 ,< div > 标签 没有 任何 特别 之 处 ,只 是 无 论 怎 么 调整 浏览 器 ， 
每 个 div 标签 都 是 占据 一 行 , 即 : 默认 情况 下 ,一 行 只 能 容纳 一 个 div 标签 ,为 了 证 明 一 行 只 
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能 容纳 一 个 div 标签 ,我们 来 制作 一 个 例子 。 这 里 给 div 加 上 id 属性 ,并 为 其 加 上 CSS 样 


式 , 使 div 拥 有 背景 色 以 及 宽度 ,其 编写 代码 如 例 2-6-1 所 示 。 
例 2-6-1 设置 背景 的 div 标签 
1 <htnl> 
2 <head> 
3 <title> 图 片 滚动 效果 </title> 
4 < style type = "text/css"> 
5 #1{ 
6 background — color: # aaa; 
1 ) 
8 #2{ 
9 background - color: # bb2; 
10 width:250px; 
11 ) 
12 #3( 
13 background - color: # 23a; 
14 ) 
15 </style> 
16 </head> 
17 <body> 
18 <div id= "1"> 第 一 个 div 标签 中 的 内 容 </div> 
19 <div id= "2"> 第 二 个 div 标签 中 的 内 容 </div> 
20 <div id= "3"> 第 三 个 div 标签 中 的 内 容 </div> 
21 </body> 
22 </html> 


其 运行 效果 如 图 2-6-1 所 示 。 


图 2-6-1 设置 背景 的 div 标签 


通过 设置 背景 ,可 以 看 出 div 标签 默认 占据 一 行 ,宽度 也 是 一 行 的 宽度 。 通 过 设置 宽度 
可 以 看 出 ,并 不 是 因为 div 宽度 为 一 行 导致 无 法 容纳 后 面 的 div 标签 。 无 论 宽度 多 小 ,一 行 
始终 只 有 一 个 div 标签 。 

在 大 多 数 情况 下 ,div 只 有 与 CSS 样式 配合 使 用 才能 体现 出 div 的 作用 。 


注意 : 

上 述 代码 中 所 用 到 的 style( 样 式 ) 在 后 面 的 章节 将 会 讲 到 。 这 里 使 用 样式 只 是 为 了 帮 
助 初学 者 更 好 地 了 解 层 的 特点 。 

2.6.2 插入 层 

与 其 他 HTML 标签 一 样 ,只 需要 应 用 < div ></div > 标签 ,将 内 容 放置 其 中 , 便 可 以 应 


用 < div > 标签 。 但 是 要 注意 的 是 < div > 标签 只 是 个 容器 ,作用 是 把 相关 内 容 组 成 一 个 块 装 


区 域 。 
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< div > 标签 中 除了 直接 放置 文本 之 外 ,也 可 以 放 入 其 他 标签 ,还 可 以 把 多 个 < div > 进行 
嵌 套 使 用 ,最 终 目的 是 合理 地 组 织 网 页 内 容 区 域 。 


总 结 


名 使 用 < table ></table > 标签 可 以 创建 表格 。 

名 使 用 < tr ></tr > 标签 可 以 为 表格 创建 行 。 

名 使 用 < td ></td > 标签 可 以 为 表格 的 行 创建 数据 单元 格 。 

名 使 用 < th ></th > 标签 可 以 为 单元 格 的 首 行 或 首 列 创建 标题 单元 格 。 
名 表格 的 数据 放置 在 单元 格 标签 中 。 

名 使 用 < caption ></caption > 标签 可 以 为 表格 创建 标题 。 

名 使 用 colspan 属性 或 rowspan 属性 可 以 实现 相 邻 单元 格 合并 。 

名 使 用 < ol ></ol > 标签 可 以 创建 有 序列 表 , 使 用 < ul ></ul > 标签 可 以 创建 无 序列 表 。 
z fi |< li ></li > 标签 可 以 为 列表 创建 列表 项 目 。 

名 使 用 < marquee >< marquee > 标签 可 以 实现 图 片 或 文字 的 滚动 。 
名 使 用 < div >< div > 标签 控制 页 面 布 局 。 





课 后 习题 


(1) 


° mo 3 O nn 8 wne 


(2) 


分 析 下 面 的 HTML 代码 片段 , 则 选项 中 的 说 法 错误 的 是 ( ) 。( 选 择 两 项 ) 
< table border = "10" bordercolor = "yellow cellspacing = "0" cellpadding = "5 > 

< tr bgcolor = "red"> 

< td colspan = "2"> 书 籍 </td> 

< td colspan = "3"> 书 籍 </td> 

</tr> 

<tr>N 

<td> 图 书 </td>< td> 杂 志 </td>< td> 磁 带 </td>< td> CD</td><td> DVD </td> 

</tr> 

</table> 

A. 表格 共 5 列 ,书籍 " 跨 2 列 ,音像 " 跨 3 列 

B. 表格 的 背景 颜色 为 yellow 

C.“ 书 籍 " 和 “音像 ”所 在 行 的 背景 为 red 

D. 表格 中 文字 与 边框 距离 为 0, 表 格 内 框 宽度 为 5 

分 析 下 面 的 HTML 代码 片段 , 则 选项 中 的 说 法 正确 的 是 ( ) 。( 选 择 两 项 ) 


< table border = "10"> 
<tr><td colspan= 2 align = "center"># 4 </td></tr> 
< tr >< td rowspan = 2align = "center"> 成 绩 </td>< td align = "center"> 语 文 </td></tr> 


4 
5 
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<tr><td colspan = 2 align = "center"> 数 学 </td></tr> 
</table> 


A. 该 表格 共有 2 行 3 列 
B. 该 表格 的 边框 宽度 为 10mm 
C. 该 表格 中 的 文字 均 居 中 显示 
D.“ 姓 名 ?单元 格 跨 2 列 


(3) 在 HTML 中 ,下 面 ( ) 标 签 用 于 定义 表 的 单元 格 。( 选 择 一 项 ) 


A. <table > B. <body> 
C, <d> D. <tr> 


(4) 在 HTML 页 面 中 ,要 显示 如 下 图 所 示 的 表格 ,应 在 下 方 HTML 代码 的 下 画 线 处 填 


& Ó N PP 


) 。 (选择 一 项 ) 


FT” gx 








< table border = "1"> 


<tr><td = "2"> 性 别 </td></tr> 
<tr><td> 男 </td><td> 女 </td></tr> 

</table> 

A. rows B. cols 

C. rowspan D. colspan 


(5) 分 析 下 面 的 HTML 语句 ,以 下 选项 中 说 法 正确 的 是 ( )。( 选 择 两 项 ) 


1 
2 


< table width = "50" height = "100" border = "15" bordercolor = "red"> …… 
</table> 


A. 该 表格 的 高 度 等 于 100 像素 

B. 该 表格 的 宽度 为 当前 浏览 器 窗口 高 度 的 50% 
C. 该 表格 的 边框 宽度 为 15 像素 

D. 该 表格 的 背景 颜色 为 红色 


(6) 分 析 下 面 的 HTML 代码 片段 , 则 选项 中 的 说 法 错误 的 是 ( ) 。( 选 择 一 项 ) 


1 
2 
3 
4 
S 
6 


< table border = "2"> 
< tr bgcolor = "yellow"> 
< td bgcolor = "red"> 1 H </td> 
<td>2 月 </td> 
< td bgcolor = "green"> 3 月 </td> 
</tr> 
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E] 


< tr bgcolor = "gray"> 


8 < td bgcolor = "red">5 月 </td> 
9 <td>6 月 </td> 

10 < td bgcolor = "green"> 7 月 </td> 
11 </tr> 

12 </table> 


A. “1 月 ”单元 格 的 背景 色 为 红色 (red) 
B. “2 月 ”单元 格 的 背景 色 为 网 页 背景 色 
C. “6 月 ”单元 格 的 背景 色 为 灰色 (gray) 
D. “7 月 ?单元 格 的 背景 色 为 绿色 (green) 
(7) Æ HTML 文档 中 ,< td > 标签 的 ( ) 属 性 可 以 创建 多 个 行 的 单元 格 。( 选 择 


一 项 ) 
A. spancol B. row 
C. rowspan D. span 
(8) 在 HTML 中 ,通过 < table > 标签 的 ( ””) 属 性 指定 表格 的 边框 宽度 。( 选 择 一 项 ) 
A. size B. height 
C. border D. bordercolor 


(9) 在 HTML 中 ,可 以 使 用 行 和 列 的 表格 来 显示 数据 ,下 面 ( ) 标 签 用 户 在 HTML 
文档 中 创建 表格 。( 选 择 一 项 ) 


A. <table ></table > B. <p></p> 
C. < body ></body > D. < head ></head > 
(10) 在 HTML 页 面 中 ,要 实现 如 下 图 所 示 的 效果 ,选项 中 代码 正确 的 是 ( )。( 选 
择 一 项 ) 
R 隔 文 
ÎE 
= 区 





A. <table border 一 1 > 
<tr><td rowspan=2 > 姓名 </td></tr> 
<tr><td colspan=2 > 成 绩 </td >< td > 语文 </td ></tr> 
<tr>< td> 数 学 </td></tr> 
</table > 
B. < table border=1 > 
<tr><td colspan=2 > 姓名 </td></tr> 
<tr><td rowspan=2 > 成 绩 </td >< td > 语文 </td ></tr > 
<tr>< td > 数学 </td></tr> 
</table> 
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. < table border=1 > 


<tr><td colspan=2 > 姓名 </td></tr> 

<tr><td rowspan=2 > 成 绩 </td ></tr> 

<tr><td> 语 文 </td><td> 数 学 </td></tr> 
</table > 


. < table border 一 1 > 


<tr><td colspan=2 > 姓名 </td></tr> 
<tr><td rowspan=2 > 成 绩 </td>< td > 语文 </td >< td > 数学 </td ></tr> 
</table > 


(11) 在 HTML 中 ,以 下 ( ) 属 性 可 以 用 来 设置 表格 中 文字 与 边框 的 距离 。( 选 择 


一 项 ) 


A, 
C. 


border B. cellpadding 


cellspacing D. bordercolor 


(12) 在 HTML 页 面 中 ,要 创建 一 个 1 行 2 列 的 表格 ,下 面 语句 正确 的 是 ( )。( 选 


择 一 项 ) 


A. 


< table > 

<td><tr> 单 元 格 1 </tr><tr> 单 元 格 2 </tr ></td> 
</table > 
< table > 

<tr><td> 单 元 格 1 </td><td> 单 元 格 2 </td></tr> 
</table > 
< table > 

<tr><td> 单 元 格 1 </td></tr> 

<tr><td> 单 元 格 2 </td ></tr > 
</table > 


. < table > 


<td><tr> 单 元 格 1</tr ></td> 
<td><tr> 单 元 格 2 </tr></td> 
</table > 


(13) 运用 表格 编写 如 下 图 所 示 效 果 对 应 的 HTML 代码 。 
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(14) 运用 有 序列 表 编 写 如 下 图 所 示 效 果 对 应 的 HTML 代码 。 
图 像 设计 软件 
h. Photoshop 
i. CorelDraw 


j. Fireworks 
k. Illustrator 


(15) ZWA ENRERE U F EI Pr S 280 EST ñ) HTML 代码 。 
图 像 设计 软件 
o Photoshop 
a. Adobe 公 司 出 品 
b. 图像 处 理 软件 
oCorelDraw 
Á. Corel 公 司 出 品 
B. 图 形 图 像 软件 
oFireworks 
i. Macromedia 公 司 出 品 
ii. 网 络 图 形 软件 
olllustrator 
I. Adobe 公 司 出 品 
II. 矢量 绘图 软件 


(16) 运用 图 层 完 成 公告 栏 ,其 效果 如 下 图 所 示 。 








【公告 栏 





DERES py wasiqa, u 
— 
[j wes — ¿| 
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表单 与 表单 元 素 





KET FL 
名 理解 表单 的 作用 
局 理解 表单 与 表单 元 素 的 关系 
局 掌握 表单 标签 及 其 属性 
局 掌握 各 种 表单 元 素 标签 及 其 属性 
避 认 识 表单 提交 


ETD 
请 在 预习 时 学 会 下 列 单词 的 含义 和 发 音 , 并 填写 在 横 线 处 。 


. from; 





. action: 





. password: 





. input: 





. radio: 





. checkbox: 





. submit: 





. reset; 





ooN @ m m Q t > 


. button: 





= 
° 


. image: 





ts 
jð 


. hidden; 





12. select: 





13. option: 





14. value: 





15. textarea: 





46 








使 用 HTML 和 CSS 开 发 Web 网 站 

















3.1 表单 











表单 是 一 个 包含 表单 元 素 的 区 域 ,是 一 个 一 组 数据 的 容器 。 表 单 在 网 页 中 的 作用 不 可 
小 视 , 主 要 负责 数据 采集 的 功能 ,例如 可 以 采集 访问 者 的 名 字 和 e_mail 地 址 、 调 查 表 、 留 言 
HE. 


3.1.1 表单 的 组 成 


一 个 表单 有 3 个 基本 组 成 部 分 。 

表单 标签 : 这 里 面包 含 了 处 理 表单 数据 所 用 CGI 程序 的 URL 以 及 数据 提交 到 服务 器 
的 方法 。 

表单 域 : 包含 了 文本 框 、 密 码 框 \ 隐 藏 域 , 多 行文 本 框 、 复 选 框 . 单 选 框 . 下 拉 选 择 框 和 文 
件 上 传 框 等 。 

表单 按钮 : 包括 提交 按钮 、 复 位 按钮 和 一 般 按 钮 ,用 于 将 数据 传送 到 服务 器 上 的 CGI 脚 
本 或 者 取消 输入 ,还 可 以 用 表单 按钮 来 控制 其 他 定义 了 处 理 脚 本 的 处 理工 作 。 为 了 顾及 不 
同 的 网 页 设计 工具 ,本 文 只 讲述 代码 的 设计 ,不 具体 讲述 操作 方法 ,下 面 就 是 表单 的 HTML 
代码 设计 要 点 。 








3.1.2 表单 标签 < form ></form > 


功能 : 用 于 声明 表单 ,定义 采集 数据 的 范围 ,也 就 是 < form > 和 </form > 里 面包 含 的 数 
据 将 被 提交 到 服务 器 或 者 电子 邮件 里 。 
语法 : <form action 二 "url” method="get| post" name="mime" target=",..">,. 
.</form> 
用 法 如 例 3-1-1 所 示 。 
例 3-1-1 表单 演示 


1 <html> 
2 <head> 

3 <title > 表单 示例 </title> 

4 </head> 

5 <body> 

6 < form name = "login" method = "get" action = "dlcg. html" name = "form_name" enctype = 
7 "TEXT/plain" target = "_top" > 

8 [浏览 者 在 此 填写 表单 数据 . ] 

9 <form> 

10 </body> 

11 </html> 


其 运行 效果 如 图 3-1-1 所 示 。 
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图 3-1-1 表单 演示 


3.2 表单 元 素 


表单 的 数据 需要 用 表单 元 素来 实现 浏览 者 的 输入 ,表单 中 包含 的 文本 框 、 密 码 框 等 即 为 
表单 元 素 ,其 他 的 表单 元 素 还 有 单 选 按钮 . 复 选 按 钮 .文件 域 . 隐 藏 域 .提交 按钮 重 园 按钮、 
自 定义 命令 按钮 .图 像 按钮 .多 行文 本 域 .列表 框 等 ,下 面 将 分 别 介绍 。 





3.2.1 < input /> 标签 


< input /> 标签 可 在 表单 中 创建 常用 的 表单 元 素 , 如 文本 框 、 密 码 框 . 单 选 按钮 、 复 选 框 、 
文件 域 、 隐 藏 域 . 提 交 按 钮 . 重 置 按 钮 自 定 义 命令 按钮 .图像 按钮 等 。 

下 面 演示 在 表单 中 使 用 < input/> 标 签 创建 文本 框 和 提交 按钮 。 

例 3-2-1 input 标签 演示 1 


1 <htnl> 

2 <head> 

3 <title> input 示例 </title> 
4 </head> 

5 <body> 

6 < form> 

7 请 输入 要 查询 的 书籍 名 称 
8 < input /> 

9 < input type = "submit" /> 
10 < form> 

11 </body> 

12 </html> 











其 运行 结果 如 图 3-2-1 所 示 。 
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请 输入 要 查询 的 书籍 名 称 ZEE 
图 3-2-1 input 标签 演示 

说 明 : 

代码 中 两 个 < input/> 标 签 分 别 创建 了 一 个 文本 框 和 一 个 提交 按钮 ,< input/> 标 签 的 
type 属性 用 于 设置 < input/> 标 签 创建 哪 种 类 型 的 表单 元 素 , 这 个 属性 的 默认 值 为 text( 即 
文本 框 ) ,不 同类 型 的 表单 元 素 有 不 同 的 外 观 , 浏 览 者 对 其 操作 方式 也 不 同 。 

例 3-2-2 演示 了 对 < input/> 标 签 的 type 属性 赋予 不 同 的 值 ,从 而 创建 出 不 同类 型 的 表 
单 输入 元 素 。 

例 3-2-2 input 标签 演示 2 


1 <html> 

2 < head> 

3 <title> input 示例 </title> 

4 </head> 

5 <body> 

6 < h1 > 在 这 里 填写 会 员 注 册 资 料 < h1/> 

p < form> 

8 会 员 名 : < input type = "text" />< br/> 

9 登录 密码 : < input type = "password" />< br/> 
10 性 别 : < input type = "radio"/> 男 

11 < input type = "radio"/> 女 <br/> 

12 婚姻 状况 : < input type = "checkbox"/> 已 婚 < br/> 
13 相片 : < input type = "file"/>< br/> 

14 < input type = "submit"/ value = "注册 ">< br/> 
15 < input type = "reset"/>< br/> 

16 </form> 

37 </body> 

18 </html> 


其 运行 结果 如 图 3-2-2 所 示 。 


在 这 里 填写 会 员 注 册 资 料 
会 员 名 : 

登录 密码 : 

性 别 : 。 男 。 女 

婚姻 状况 : 5 已 婚 

相片 : ms 


图 3-2-2 input 标签 演示 2 


说 明 : 

代码 中 的 各 个 < input/> 标 签 依次 创建 了 文本 框 、 密 码 框 单 选 按钮 、 复 选 框 文 件 域 \ 提 
交 按钮 . 重 置 按钮 。 

type 属性 可 用 的 值 以 及 相应 的 意义 见 表 3-2-1。 
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+ 
表 3-2-1 < input/> 标 签 的 type 属性 
值 意 义 
button 定义 可 点 击 按钮 (多 数 情况 下 ,用 于 通过 JavaScript 启动 脚本 ) 
checkbox 定义 复 选 框 
file 定义 输入 字段 和 “浏览 ”按钮 , 供 文件 上 传 
hidden 定义 隐藏 的 输入 字段 
image 定义 图 像 形式 的 提交 按钮 
password 定义 密码 字段 ,该 字段 中 的 字符 被 掩 码 
radio 定义 单 选 按钮 
Teset 定义 重 置 按 钮 , 重 置 按 钮 会 清除 表单 中 的 所 有 数据 
submit 定义 提交 按钮 ,提交 按钮 会 把 表单 数据 发 送 到 服务 器 
text 定义 单行 的 输入 字段 ,用户 可 在 其 中 输入 文本 ,默认 宽度 为 20 个 字符 








除 type 属性 用 于 设置 < input/> 标 签 的 类 型 之 外 ,< input/> 还 支持 其 他 一 些 属性 ,用 于 
设置 其 名 称 、 初 始 值 图像 地 址 、 选 中 与 否 的 状态 等 。 

例 3-2-3 综合 演示 了 < input/> 标 签 及 其 属性 的 使 用 。 

例 3-2-3 综合 演示 input 标签 


<html> 
<head> 
< meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
< title> HTML input 标签 示例 </title> 
</head> 
<body> 
< form id= "dreamdu" action = "http: //www. dreamdu. com/dreamdu. php" method = 
"post" enctype = "multipart/form— data"> 
<p> 
用 户 名 和 密码 : 
< input id = "hiddenField" name = "hiddenField" type = "hidden" value = 
"hiddenvalue" /> 
用 户 名 : 
< input type = "text" id= "username" name = "username" value = "dreamdu" 
size = "15" maxlength = "25" /> 
密码 : 
< input type = "password" id = "pass"name = "pass"size = "15"maxlength = "25" /> 
</p> 
<p> 
网 站 建设 服务 : 
注册 域名 < input type = "radio" value = "注册 域名 " id= "servicel" name = 
"service" /> 
购买 空间 < input type = "radio" value = "购买 空间 " id= "service2" name = 
"service" /> 
购买 云 主机 < input type = "radio" value = "购买 云 主 机 " id= "service3" 
name = "service" /> 
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网 站 定位 与 策划 < input type = "radio" value = "网 站 定位 与 策划 ”id= 
"service4" name = "service" /> 
网 站 建设 与 制作 < input type = "radio" value = "网 站 建设 与 制作 ”id= 
"service5" name = "service" /> 
网 站 推广 < input type = "radio" value = "网 站 推广 " id= "service6" name = 
"service" /> 
网 站 运营 < input type = "radio" value = "网 站 运营 " id= "service7" name = 
"service" /> 
SEO 服务 < input type = "radio" value = "SEO 服务 "id = "service8" name = 
"service" /> 
</p> 
<p> 
个 人 发 展 方向 : 
游戏 人 生 < input type = "checkbox" value = "游戏 人 生 " id= 
"direction1" name = "direction1" /> 
美工 设计 < input type = "checkbox" value = "美工 设计 "” id= 
"direction2" name = "direction2" /> 
编程 开发 < input type = "checkbox" value = "编程 开发 " id= 
"direction3" name = "direction3" /> 
运营 与 管理 < input type = "checkbox" value = "运营 与 管理 " id= 
"direction4" name = "direction4" /> 
创业 < input type = "checkbox" value = "创业 " id= "direction5" name = 
"direction5" /> 
</p> 
<p> 
照片 : 
个 性 照片 上 传 
< input type = "file" id = "myimage" name = "myimage" size = "35" maxlength = 
"255"! y> 
</p> 
<p> 
提交 : 
< input type = "submit" value = "submit" id= "submit" name = "submit" /> 
< input type = "reset" value = "reset" id= "reset" name = "submit" /> 
</p> 
</form> 
</body> 
</html> 





其 运行 结果 如 图 3-2-3 所 示 。 


用 户 名 和 密码 :用户 名 : deandu ZB: 


网 站 建设 服务 : 注册 域名 © 购买 空间 © 购买 云 主机 o 网 站 定位 与 策划 e 网 站 建设 与 制作 © 网 站 推广 e 网 站 运营 © SE0 服 务 © 
个 人 发 展 方向 : 游戏 人 生 D 美工 设计 O 编程 开发 D 运营 与 管理 下 创业 D 

照片 : 个 性 照片 上 传 CGE- 

提交 : 国 到 m 


图 3-2-3 ”综合 演示 input 标签 
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* 
有 关 < input/> 标 签 的 属性 , 见 表 3-2-2。 
R 3-2-2 < input/> 标 签 的 属性 
属 性 值 描 述 

accept mime_type 规定 通过 文件 上 传 来 提交 的 文件 的 类 型 
alt text 定义 图 像 输 入 的 替代 文本 
checked checked 规定 此 input 元 素 首次 加 载 时 应 当 被 选中 
disabled disabled 当 input 元 素 加 载 时 禁用 此 元 素 
maxlength number 规定 输入 字段 中 的 字符 的 最 大 长 度 
name field_name 定义 input 元 素 的 名 称 
readonly readonly 规定 输入 字段 为 只 读 
size number_of_char | 定义 输入 字段 的 宽度 
src URL 定义 以 提交 按钮 形式 显示 的 图 像 的 URL 

button 

checkbox 

file 

hidden 
type a 规定 input 元 素 的 类 型 

password 

radio 

reset 

submit 


text 











规定 input 元 素 的 值 


value 


value 


3.2.2 < textarea ></textarea > 标签 


< textarea ></textarea > 是 多 行文 本 框 ,满足 用 户 多 行 输入 的 要 求 。 
其 用 法 如 例 3-2-4 所 示 。 
例 3-2-4 textarea 标签 演示 


<title> HTML input 标签 示例 </title> 


简介 : < textarea > 在 此 填写 你 最 近 两 年 来 的 工作 经 验 </textarea> 


1 <html> 

2 <head> 

3 

4 </head> 

5 < body> 

6 < form > 
7 

8 </form> 
9 </body> 

10 </html> 





其 运行 结果 如 图 3-2-4 所 示 。 


在 此 填写 你 最 近 两 年 + 


说 明 位 于 < textarea ></textarea > 标签 之 间 的 文字 是 它 简介 ， 未 的 工作 经 验 ~ 
的 初始 默认 文本 。 3-2-4 textarea 标签 演示 
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与 < input > 标签 一 样 ,< textarea ></textarea > 标签 也 支持 id name, disabled 等 属性 。 
另外 还 支持 cols、rows、wrap 等 属性 ,具体 见 表 3-2-3. 
表 3-2-3 < textarea > 标签 的 属性 
Bg 性 #f R 


定义 多 行文 本 框 的 名 称 , 要 保证 数据 的 准确 采集 ,必须 定义 一 个 独一无二 的 名 
称 ; 属性 定义 多 行文 








name 














cols 定义 多 行文 本 框 的 宽度 ,单位 是 单个 字符 宽度 

rows 定义 多 行文 本 框 的 高 度 ,单位 是 单个 字符 宽度 

disabled 定义 禁用 文本 区 ,被 禁用 的 文本 区 既 不 可 用 ,也 不 可 单 击 
readonly 定义 文本 区 为 只 读 , 在 只 读 的 文本 区 中 ,无 法 对 内 容 进行 修改 





定义 输入 内 容 大 于 文本 域 时 显示 的 方式 ,可 选 值 如 下 : 

默认 值 是 文本 自动 换行 , 当 输入 内 容 超 过 文本 域 的 右边 界 时 会 自动 转 到 下 一 行 ， 
而 数据 在 被 提交 处 理 时 自动 换行 的 地 方 不 会 有 换行 符 出 现 ; 

off, 用 来 避免 文本 换行 , 当 输入 的 内 容 超过 文本 域 右 边界 时 ,文本 将 向 左 滚动 , 必 
须 用 Return 才能 将 插入 点 移 到 下 一 行 ; 

virtual, 人 允许 文本 自动 换行 , 当 输入 内 容 超过 文本 域 的 右边 界 时 会 自动 转 到 下 一 
行 ,而 数据 在 被 提交 处 理 时 自动 换行 的 地 方 不 会 有 换行 符 出 现 ; 

physical, 让 文本 换行 , 当 数据 被 提交 处 理 时 换行 符 也 将 被 一 起 提交 处 理 


wrap 





例 3-2-5 演示 了 多 行文 本 域 属性 的 使 用 。 
例 3-2-5 多 行文 本 域 属性 的 使 用 


1 <html> 

2 <head> 

3 <title> 多 行文 本 域 属性 的 使 用 </title> 

4 </head> 

5 <body> 

6 <form> 

7 简介 : < textarea name = "textarea" cols = "40" rows = "6"> 狐狸 为 躲避 猎人 们 追赶 
8 ”而 逃窜 ,恰巧 遇见 了 一 个 樵 夫 , 便 请 求 让 他 躲藏 起 来 , 樵 夫 叫 狐狸 去 他 的 小 屋 里 躲 着 。 一 会 儿 , 许 
9 ”多 猎人 赶 来 ,向 检 夫 打听 狐狸 的 下 落 ,他 嘴 里 一 边 大 声 说 不 知道 ,又 一 边 做 手势 ,告诉 他 们 狐狸 


10 躲藏 的 地 方 。 猎 人们 相信 了 他 的 话 ,并 没 留意 他 的 手势 。 狐 狸 见 猎人 们 都 走 远 了 , 便 从 小 屋 出 来 ， 
11 什么 都 没 说 就 走 。 樵 夫 责 备 狐 狸 ,说 自己 救 了 他 一 命 ,一 点 谢意 都 不 表示 。 狐 狸 回答 说 :“ 如 果 你 
12 的 手势 与 你 的 语言 是 一 致 的 ,我 就 该 好 好 地 感谢 你 了 。”</textarea> 


13 </form> 
14 </body> 
15 </html> 


其 运行 结果 如 图 3-2-5 所 示 , 





MOE Sm A IE Smikg, k'a 
-ME miskita g+ DES 
B OMAERRE. AN TAANE 
来 ， ARANTIRDTE, 他 哈里 一 边 大 
声 说 不 知道 ， 做 手势 ， 告 诉 他 们 狐狸 
寓言 小 故事 ， RENHA- RUNAR 7 wis , 并 没 留 ~ 
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3.2.3 <select ></select > 及 < option ></option > 


< select ></select > 标签 对 用 来 创建 一 个 菜单 下 拉 列 表 框 。 此 标签 对 用 于 < form > 
</form > 标签 对 之 间 。< select > 具有 multiple, name 和 size 属性 。mnultiple 属性 不 用 赋值 ， 
直接 加 入 标签 中 即 可 使 用 ,加 入 了 此 属性 后 列表 框 就 成 了 可 多 选 的 了 ; name 是 此 列表 框 的 
名 字 , 它 与 上 边 讲 的 name 属性 作用 是 一 样 的 ; size 属性 用 来 设置 列表 的 高 度 , 默 认 值 为 1， 
车 没有 设置 multiple 属性 ,显示 的 将 是 一 个 弹出 式 的 列表 框 。 

< option > 标签 用 来 指定 列表 框 中 的 一 个 选项 , 它 放 在 < select ></select > 标签 对 之 间 。 
此 标签 具有 selected 和 value 属性 , selected 用 来 指定 默认 的 选项 , value 属性 用 来 给 
< option > 指定 的 那 一 个 选项 赋值 ,这 个 值 是 要 传送 到 服务 器 上 的 ,服务 器 正 是 通过 调用 
< select > 区 域 的 名 字 的 value 属性 来 获得 该 区 域 选 中 的 数据 项 的 。 

例 3-2-6 演示 了 下 拉 列 表 的 使 用 。 

例 3-2-6 下 拉 列 表 框 





1 <html> 

2 <head> 

3 <title> 下 拉 列 表 框 </title> 

4 </head> 

5 <body> 

6 < form action = "" method = "post"> 
f. 

8 


<p> 请 选择 最 喜欢 的 女 歌星 : 
< select > 
9 < option >-- 请 选择 -- </option> 
10 < option > 张曼玉 </option> 
Ti < option > 王菲 </option > 
12 < option > 田震 </option> 
13 < option > 那英 </option> 
14 </select > 
15 </form> 
16 </body> 
17 </html> 


其 运行 结果 如 图 3-2-6 所 示 。 


-E 
£ 


图 3-2-6 下拉 列 表 框 


说 明 : 

要 创建 列表 框 及 其 选项 ,需要 使 用 < select ></select > 和 < option ></option > 标签 向 
套 。< option ></option > 表示 列表 中 的 一 个 选项 ,放置 在 这 一 对 标签 之 间 的 文本 是 这 个 选 
项 显示 给 浏览 者 的 文字 。 

< option ></option > 选项 标签 支持 一 些 属性 ,可 用 于 设置 这 个 选项 表示 的 数据 ,以 及 设 
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定 它 是 否 在 初始 状态 下 被 选中 , 见 表 3-2-4。 
表 3-2-4 < option ></option > 标签 的 属性 





属 性 描 Ë 





用 来 给 < option > 指定 的 那 一 个 选项 赋值 ,这 个 值 是 要 传送 到 服务 器 上 的 ,服务 器 正 
是 通过 调用 < select > 区 域 的 名 字 的 value 属性 来 获得 该 区 域 选中 的 数据 项 


value 





selected 用 来 指定 默认 的 选项 








例 3-2-7 演示 了 < option ></option > 标签 属性 的 使 用 。 
例 3-2-7 < option ></option > 标签 属性 


1 <html> 

2 <head> 

3 <title> 下 拉 列 表 框 </title> 

4 </head> 

5 <body> 

6 < form action = "" method = "post"> 

7 <p> 请 选择 最 喜欢 的 女 歌星 : 

8 < select > 

9 < option value = ""> -- 请 选择 -- </option> 


10 < option value = "zhmy"> 张 曼 玉 </option> 

11 < option value = "wf" selected> 王 菲 </option> 
12 < option value = "tzh"> 田 震 </option > 

13 < option value = "ny"> 那 英 </option> 

14 </select > 

15 </form> 

16 </body> 

17 </html> 


其 运行 结果 如 图 3-2-7 所 示 。 
请 选择 最 喜欢 的 女 歌星 : EE ~ 
图 3-2-7 < option ></option > 标签 属性 


< select ></select > 标签 也 支持 一 些 属性 ,用 于 设置 名 称 , 显 示 的 选项 数目 ,是 否 可 被 多 
选 , 见 表 3-2-5。 
表 3-2-5 < select ></select > 标签 的 属性 























属 性 描述 
id 这 是 定位 元 素 时 使 用 的 ,对 于 UI 和 表单 标签 它 会 被 用 作 HTML 的 id 属性 
name 元 素 的 名 字 , 必 须 设置 此 属性 才能 参与 表单 提交 
disabled 禁用 此 列表 

设置 列表 框 中 的 选项 显示 几 项 ,未 设置 此 属性 时 ,列表 框 为 下 拉 形 式 ; 设置 此 属性 后 ， 
列表 框 将 展开 为 列表 形式 
multiple 设置 列表 框 的 选项 可 被 浏览 者 多 选 
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例 3-2-8 演示 了 可 多 选 的 列表 框 。 
例 3-2-8 < select ></select > 标签 的 属性 


1 <html> 

2 <head> 

3 <title> 下 拉 列 表 框 </title> 

4 </head> 

5 <body> 

6 < form action = "" method = "post"> 

7 < 了 > 请 选择 最 喜欢 的 女 歌星 : 

8 < select name = "nmx" size = "6" multiple = "multiple"> 
9 < option value = "">-- 请 选择 -— </option> 


10 < option value = "zhmy"> 张 最 玉 </option> 

11 < option value = "wf" selected > 王菲 </option > 
12 < option value = "tzh"> 田 震 </option> 

13 < option value = "ny"> 那 英 </option> 

14 < option value = "zw"> 赵 蔽 </option > 

15 <option value = "1qx"> 林 青 霞 </option > 

16 </select> 

47. </form> 

18 </body> 

19 </html> 


其 运行 结果 如 图 3-2-8 所 示 。 





fa 
请 选择 最 喜欢 的 女 歌星 : |Š 
图 3-2-8 < select ></select > 标签 的 属性 


3.2.4 <button></button > 标签 


除了 之 前 所 述 的 < input/> 标 签 可 以 为 表单 创建 各 种 按钮 外 ,还 可 以 用 < button > 标签 定 
义 一 个 按钮 。 在 button 元 素 内 部 ,可 以 放置 内 容 , 如 文本 或 图 像 。 这 是 该 元 素 与 使 用 input 
元 素 创建 的 按钮 之 间 的 不 同 之 处 。 

< button > 控件 与 <input type 一 "button"> 相 比 ,提供 了 更 为 强大 的 功能 和 更 丰富 的 内 
容 。< button > 与 </button > 标签 之 间 的 所 有 内 容 都 是 按钮 的 内 容 , 其 中 包括 任何 可 接受 的 
正文 内 容 , 如 文本 或 多 媒体 内 容 。 例 如 ,我 们 可 以 在 按钮 中 包括 一 个 图 像 和 相关 的 文本 ,用 
它们 在 按钮 中 创建 一 个 吸引 人 的 标记 图 像 。 

唯一 禁止 使 用 的 元 素 是 图 像 映 射 ,因为 它 对 鼠标 和 键盘 敏感 的 动作 会 干扰 表单 按钮 的 





行为 。 
与 input 标签 类 似 , 也 可 以 设置 type, name, id, value, disabled 等 属性 ,其 属性 详解 见 
表 3-2-6。 
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表 3-2-6 < button ></button > 标签 的 属性 




















B 性 描 述 

id 标签 在 页 面 内 的 唯一 标识 符 

name 按钮 的 名 字 

disabled 禁用 此 按钮 
通过 表单 传递 到 服务 器 端的 数据 

value 注意 : 此 属性 对 正 浏览 器 无 效 ,IE 浏览 器 会 将 < button ></button > 标签 之 间 的 文件 作 
为 此 按钮 的 数据 发 送 给 服务 器 

o 按钮 类 型 有 3 种 ,分 别 是 : button, 普 通 按钮 ; reset, 重 置 表单 按钮 ; submit, 提 交 按 钮 





注意 : 此 属性 的 默认 值 在 不 同 的 浏览 器 之 间 有 差别 ,所 以 应 显 式 地 为 此 属性 赋值 





例 3-2-9 演示 了 使 用 < button ></button > 标签 创建 3 种 不 同 功能 的 按钮 。 
例 3-2-9 < button ></button > 标签 的 属性 


1 <html> 

2 <head> 

3 <title> 下 拉 列 表 框 </title> 

4 </head> 

5 <body> 

6 < form action = "" method = "post"> 

K < button name = "submit" type="submit" value = "提交 "> 提交 </button > 
8 < button name = "reset" type = "reset"> 重 置 </button > 

9 < button name = "button" type = "button" > 关闭 窗口 </button > 
10 </form> 

11 </body> 

12 </html> 

其 运行 结果 如 图 3-2-9 所 示 。 


[8z) 688) xingn 
图 3-2-9 < button ></button > 标签 的 属性 











3.2.5 < label ></label > 标签 


< label > 标签 为 input 元 素 定义 标注 (标记 )。 主 要 用 于 为 上 述 表单 元 素 提供 提示 性 的 
XF. label 元 素 不 会 向 用 户 呈 现任 何 特殊 效果 。 不 过 , 它 为 鼠标 用 户 改进 了 可 用 性 。 如 果 
在 label 元 素 内 单 击 文本 ,就 会 触发 此 控件 。 也 就 是 说 , 当 用 户 选择 该 标签 时 ,浏览 器 就 会 自 
动 将 焦点 转 到 和 标签 相关 的 表单 控件 上 , 它 的 用 法 就 是 将 < label > 标签 的 for 属性 与 某 个 表 
单元 素 进行 绑 定 , 一 般 用 于 单 选 按钮 和 复 选 框 。 例 3-2-10 演示 了 使 用 < label ></label > 


标签 。 


例 3-2-10 < label ></label > 标签 


1 <html> 


2 
3 


<head> 


< meta http- equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
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<title> HTML input 标签 示例 </title> 
</head> 
<body> 
< form id = "dreamdu" method = "post" enctype = "multipart/form— data"> 
<p> 
用 户 名 和 密码 : 
< input id= "hiddenField" name = "hiddenField" type = "hidden" value = 
"hiddenvalue" /> 
用 户 名 : 
< input type = "text" id= "username" name = "username" value = "dreamdu" size= 
"15" maxlength= "25" /> 
密码 : 
< input type = "password" id= "pass" name = "pass" size = "15" maxlength = 
e25% = 
</p> 
<p> 
网 站 建设 服务 : 
< label for = "servicel"> 注 册 域名 </label > 
< input type = "radio" value = "注册 域名 "id = "servicel" name = 
"service" /> 
< label for = "service2"> 购 买 空间 </label > 
< input type = "radio" value = "购买 空间 "id = "service2" name = 


"service" /> 

< label for = "service3"> 购 买 云 主机 </label > 

< input type = "radio" value = "购买 云 主机 " id= "service3" name = 
"service" /> 

< label for = "service4"> 网 站 定位 与 策划 </label > 

< input type = "radio" value = "网 站 定位 与 策划 ”id = "service4" name = 
"service" /> 


< label for = "service2"> 购 买 空间 </label > 

网 站 建设 与 制作 < input type = "radio" value = "网 站 建设 与 制作 ”id= 
"service5" name = "service" /> 

< label for = "service6"> 网 站 推广 </label > 

< input type = "radio" value = "网 站 推广 ”id = "service6" name = 
"service" /> 

< label for = "service7"> 网 站 运营 </label > 

< input type = "radio" value = "网 站 运营 " id = "service7" name = 
"service" /> 

< label for = "service8"> SEO 服务 </label > 

< input type = "radio" value = "SFO 服务 " id = "service8" name = "service" /> 

</p> 
<p> 

个 人 发 展 方向 : 

< label > 游戏 人 生 

< input type = "checkbox" value = "游戏 人 生 " id= "direction1" name = 
"direction1" /></label > 

< label > 美工 设计 

< input type = "checkbox" value = "美工 设计 " id= "direction2" 
name = "direction2" /></label > 
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53 < label > 编程 开发 

54 < input type = "checkbox" value = "编程 开发 " id = "direction3" name = 
55 "direction3" /></label> 

56 < label > 运营 与 管理 

57 < input type = "checkbox" value = "运营 与 管理 " id = "direction4" name= 
58 "direction4" /></label> 

59 < label > 创业 

60 < input type = "checkbox" value = "创业 " id = "direction5" name = 

61 "direction5" /></label> 

62 </p> 

63 <p> 

64 照片 : 

65 个 性 照片 上 传 

66 < input type = "file" id = "myimage" name = "myimage" size= "35" 

67 maxlength = "255" /> 

68 </p> 

69 <p> 

70 提交 : 

7 < input type = "submit" value = "submit" id= "submit" name = "submit" /> 
72 < input type = "reset" value = "reset" id= "reset" name = "submit" /> 
73 </p> 

74 </form> 

75 </body> 

76 </html> 


其 运行 结果 如 图 3-2-10 所 示 。 
用 户 名 和 密码 : 用 户 名 : dreandu 密码 : 
网 站 建设 服务 ; 注册 域名 e 购买 空间 è 购买 云 主机 o 网 站 定位 与 策划 © HITTA 网 站 建设 与 制作 e 网 站 推广 自 网 站 运营 © SE0 服 务 e 
个 人 发 展 方向 : 游戏 人 生 D 美工 设计 F 编程 开发 D 运营 与 管理 W 创业 i 
RA: 个 性 照片 上 传 BE 
提交 : sss) 


3-2-10 < label ></label > 标签 


单 击 单 选 按钮 劳 边 的 标签 文本 ,可 以 选中 这 个 单 选 按钮 ,就 像 这 个 单 选 按钮 本 身 被 单 击 
一 样 , 单 击 复 选 框 旁 边 的 标签 文件 ,可 以 切换 这 个 复 选 框 选 中 与 否 的 状态 ,就 像 单 击 这 个 复 
选 框 一 样 。 

说 明 : 

“网 站 建设 服务 ”的 单 选 按钮 与 旁边 的 < label ></label > 标签 采用 了 显示 绑 定 的 方式 ， 
即 < label > 的 for 属性 值 指定 为 要 绑 定 的 表单 元 素 的 id 属性 值 ,而 “个 人 发 展 方向 ”: 的 复 选 框 
与 旁边 < label > 标签 采用 了 隐 式 绑 定 的 方式 , 即 把 要 绑 定 的 表单 元 素 放置 在 < label ></label > 
的 标签 内 部 。 


3.2.6 < fieldset ></fieldset > 及 < legend ></legend > 标签 


fieldset 元 素 可 将 表单 内 的 相关 元 素 分 组 。< fieldset > 标签 将 表单 内 容 的 一 部 分 打包 ， 
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生成 一 组 相关 表单 的 字段 。 当 一 组 表单 元 素 放 到 < fieldset > 标签 内 时 ,浏览 器 会 以 特殊 方 
式 来 显示 它们 ,它们 可 能 有 特殊 的 边界 .3D 效果 ,或 者 甚至 可 创建 一 个 子 表单 来 处 理 这 些 元 
素 。< fieldset > 标签 没有 必需 的 或 唯一 的 属性 。< legend > 标签 为 fieldset 元 素 定义 标题 。 
例 3-2-11 演示 了 使 用 < fieldset ></fieldset > 及 < legend ></legend > 标签 。 

例 3-2-11 < fieldset ></fieldset > 及 < legend ></legend > 标签 的 使 用 


1 <htnl> 

2 <head> 

3 <title> HTML fieldset 标签 示例 </title> 

4 </head> 

5 <body> 

6 < form method = "post" enctype = "multipart/form— data" id= "dreamduform"> 
六 < fieldset > 

8 < legend> 用 户 名 与 密码 :</legend> 

9 < input id = "hiddenField" name = "hiddenField" type = "hidden" value = 
10 "hiddenvalue" /> 

11 < label for = "username"> 用 户 名 :</label> 

12 < input type = "text" id= "username" name = "username" value = 
13 "dreamdu" /> 

14 < label for = "pass"> 密 码 :</label > 

35 < input type = "password" id= "pass" name = "pass" /> 

16 </fieldset > 

aT < fieldset > 

18 < legend > 性 别 :</legend> 

19 < label for = "boy"> 男 </label > 

20 < input type = "radio" value = "1" id= "sex" name= "sex" /> 

21 < label for = "girl"> 女 </label> 

22 < input type = "radio" value = "2" id= "sex" name = "sex" /> 

23 < label for = "sex"> 保 密 </label > 

24 < input type = "radio" value = "3" id= "sex" name = "sex" /> 

25 </fieldset > 

26 < fieldset > 

27 < legend > 我 最 喜爱 的 :</legend> 

28 < label for = "computer"> 计 算 机 </label> 

29 < input type = "checkbox" value= "1" id= "fav" name = "fav" /> 
30 < label for = "trval"> 旅 游 </label > 

31 < input type = "checkbox" value = "2" id= "fav" name = "fav" /> 
32 < label for = "buy"> 购 物 </label > 

33 < input type = "checkbox" value = "3" id= "fav" name = "fav" /> 
34 </fieldset > 

35 <fieldset > 

36 < legend > 对 华 瑞 的 意见 :</legend> 

37 < label for = "select"> 你 对 华 瑞 的 感觉 </label > 

38 < select size = "1" id= "select" name = "select"> 


39 < option > 很 全 面 , 很 好 </option> 
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40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
S1 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74 
75 
76 
TT 
78 
79 
80 
81 
82 
83 
84 
85 


<option> 一 般 般 吧 , 还 要 努力 </option> 
<option> 有 很 多 问题 ,不 过 还 可 以 </option> 
</select> 
</fieldset > 
< fieldset> 
< legend > 华 瑞 编程 语言 选择 :</legend > 
< label for = "multipleselect"> 你 想 在 华 瑞 学 习 的 编程 语言 </label > 
< select size= "10" multiple= "multiple" id= "multipleselect" 
name = "multipleselect"> 
< option > XHTML </option > 
< option > CSS </option> 
< option > JAVASCRIPT </option> 
< option > XML </option> 
< option > PHP </option > 
< option> C#</option> 
< option > JAVA </option > 
<option> C++</option> 
< option > PERL </option > 
</select > 
</fieldset > 
< fieldset > 
< legend > 我 要 在 华 瑞 学 :</legend> 
< label for = "WebDesign"> 选 择 一 个 你 在 华 瑞 最 想 学 的 </1abel > 
< select id= "WebDesign" name = "WebDesign"> 
< optgroup label = "client"> 
< option value = "HTML"> HTML </option > 
< option value = "CSS"> CSS </option> 
<option value = "javascript"> javascript </option > 
</optgroup> 
< optgroup labe1 = "server"> 
< option value = "PHP"> PHP </option> 
< option value = "ASP"> ASP </option > 
<option value = "JSP"> JSP </option > 
</optgroup > 
< optgroup label = "database"> 
< option value = "Access"> Access </option> 
< option value = "MySQL"> MySQL </option> 
< option value = "SQLServer"> SQLServer </option > 
</optgroup> 
</select> 
</fieldset > 
<fieldset > 
< legend > 个 人 化 信息 :</legend> 
< label for = "myimage"> 个 性 照片 上 传 </label> 
< input type = "file" id= "myimage" name = "myimage" size= "35" maxlength = 
"255" J> 
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+ 
86 < label for = "contactus"> 联 系 我 们 </label> 
87 < textarea cols = "50" rows = "10" id= "contactus" name = "contactus"> 
88 </textarea> 
89 </fieldset > 
90 <fieldset> 
91 < legend > 提交 :</legend> 
92 < input type = "submit" value = "submit" id= "submit" name = "submit" /> 
93 < input type = "reset" value = "reset" id= "reset" name = "reset" /> 
94 </fieldset > 
95 </form> 
96 </body> 
97 </html> 


其 运行 结果 如 图 3-2-11 所 示 。 





Brass: 
用 户 名 : dreandu 密码 : 
性 别 : 








计算 机 目 旅游 m 购物 n 
HERNEN 
MERHER NEN üs = 
ARRIBES: 





JAVASCRIPT 
你 想 在 华 瑞 学 习 的 编程 语言 IL š 
我 要 在 华 瑞 学 : 
选择 一 个 你 在 华 瑞 最 想 学 的 HTL = 
个 人 化 信息 : 





个 性 照片 上 传 D 联系 我 们 . 
提交 : 





3-2-11 < fieldset ></fieldset > 及 < legend ></legend > 标签 的 使 用 


3.3 ”表单 的 属性 与 表单 的 提交 


本 节 讲 述 的 是 表单 的 属性 和 表单 的 提交 。 
3.3.1 表单 的 属性 


浏览 器 提交 表单 数据 时 ,究竟 应 该 向 服务 器 端的 哪个 程序 发 送 表单 数据 ,采用 哪 种 方式 
发 送 数据 ,表单 数据 如 何 编码 等 ,这 些 可 以 通过 < form > 标签 的 一 些 属性 来 设置 。 表 单 的 属 
性 见 表 3-3-1. 
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表 3-3-1 表单 的 属性 





属 +E 描 R 





用 来 指定 一 种 处 理 提交 表单 的 格式 , 它 可 以 是 一 个 URL 地 址 (提交 给 程式 ) 或 一 个 
电子 邮件 地 址 


action 





表示 提交 表单 的 HTTP 方法 ,其 值 有 两 种 。 一 种 为 post, 用 这 种 方法 提交 的 表单 ， 
数据 将 以 数据 块 的 形式 提交 到 服务 器 ,表单 数据 不 会 出 现在 URL 中 ,所 以 用 这 种 
方式 提交 的 表单 数据 是 安全 的 。 如 果 表 单数 据 中 包含 类 似 于 密码 等 数据 ,建议 使 
用 post 方 法 。 另 一 种 为 get, 这 是 发 送 表 单数 据 的 默认 方法 ,这 种 方法 会 以 ? 
namel 一 valuel &name2 一 value2 的 形式 ,将 表单 数据 附加 到 URL 的 后 面 ,提交 到 
服务 器 处 理 , 这 种 方法 安全 性 当然 不 如 post 方法 ,因为 表单 数据 会 暴露 在 URL 
中 ,但 是 它 的 处 理 效率 要 比 post 方法 高 。 如 果 表 单 中 的 数据 没什么 隐私 数据 , 建 
议 使 用 get 方法 , 它 的 效率 较 高 


method 





name 表单 的 名 称 , 通 过 为 表单 命名 可 以 控制 表单 与 后 台 程序 之 间 的 关系 





设置 目标 文档 打开 窗口 的 方式 ,在 这 个 窗口 中 显示 返回 的 数据 。target 的 值 分 别 
有 4 种 ,分 别 为 : _blank, 将 返回 信息 显示 在 新 开 的 浏览 器 窗口 中 ; _parent, 将 返回 
信息 显示 在 父 级 浏览 器 窗口 中 ; _self, 将 返回 信息 显示 在 当前 浏览 器 窗口 中 ; _ 
top, 将 返回 信息 显示 在 顶级 浏览 器 窗口 中 


target 





设置 表单 资料 的 编码 方式 .表单 信息 提交 的 编码 方式 ,有 3 种 ,分 别 为 TEXT/ 








enctype plain, 以 纯 文本 形式 传送 信息 ; Application/x-www-Form-urlencoded, 默认 的 编码 
形式 ; Multipart/Form-data, 使 用 MINE 编码 
id 标签 在 页 面 中 的 唯一 标识 符 


例 3-3-1 演示 了 表单 的 部 分 属性 。 
例 3-3-1 表单 的 属性 


1 <html> 

2 <head> 

3 <title> 表 单 属性 </title> 

4 </head> 

5 <body> 

6 < form action = "login. htm1" method = "post"> 

7 会 员 名 : < input type = "text" name = "name" />< br/> 

8 密 码 : < input type = "password" name = "pwd" /><br/> 
9 < input type = "submit" name = "submit" value = "登录 "/> 
10 < input type = "reset" name = "reset" value = " 重 填 "/> 
11 </form> 

12 </body> 

13 </html> 


其 运行 结果 如 图 3-3-1 所 示 。 


ÈRA: 
密 码 ， 


图 3-3-1 表单 的 属性 
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填写 会 员 和 密码 后 单 击 登录 提交 按钮 ,浏览 器 将 把 表单 数据 发 送 到 服务 器 的 login. 
html 程序 中 去 处 理 。 代 码 运行 结果 如 图 3-3-2 所 示 。 








IE = 


ee Der sa LIL 





此 程序 运行 在 服务 端 ， 它 将 接收 并 处 理 提 
ZAREEN aE 。 对 于 登录 表单 而 

程序 将 负责 验证 当前 会 员 是 否 存在 
村 最 后 向 浏览 者 反馈 结 











图 3-3-2 login 页 面 
说 明 : 
目前 我 们 并 没有 架设 Web 服务 器 ,包含 登录 表单 的 也 没有 真正 部 署 到 Web 服务 器 中 ， 
所 以 使 用 了 login. html 这 个 普通 的 静态 页 面 来 模拟 需要 在 服务 器 中 运行 的 表单 数据 处 理 
程序 。 
3.3.2 表单 的 提交 


在 表单 提交 时 ,在 浏览 器 地 址 中 可 以 看 到 除 表 单 处 理 程序 的 URL 之 外 的 一 些 数 据 , 在 
百度 中 填写 搜索 关键 字 的 场景 ,如 图 3-3-3 所 示 。 
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图 3-3-3 百度 搜索 表单 


浏览 者 填写 了 搜索 关键 字 后 单 击 百度 搜索 ,结果 如 图 3-3-4 所 示 。 

注意 : 

浏览 器 地 址 栏 中 的 数据 为 

https://www. baidu. com/# ie = utf-8&f = 8&rsv _ bp = 0@.rsv _ idx = 1@.tn = 
baidu&-wd =% E5% 8D% 8E% E7% 91% 9EIT&rsv_ pq = dd6fca950001d61f&rsv _ t = 
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百度 为 您 找到 


华 瑞 [教育 一 长 沙 专业 [[ 救 育 培训 学 校 致力 于 JavalnetlAndroid| _. 
Pu ima 化 玉 T 教 育 -长 沙 专业 IT 教 育 培训 学 校 拥 有 12 年 i 培训 经 验 ,专注 于 计算 


约 752.000 个 了 搜索 工具 











mi- ”机 软件 开发 培训 ,是 长 沙 电 脑 培训 学 校 的 领跑 者 。 联 系 电话 0731-89796 
Fe 517。 

Sfm www.huaruiedu.com/ ~ Vs - 百度 快照 - 评价 

ET 百 度 百科 


华 瑞 TT 地 处 湖南 省 长 沙市 ， 有 具体 地 址 : 湖南 省 长 沙市 国家 高 新 区 尖山 路 39 号 中 电 软 件 园 ， 占 地 
30000 杀 平米 。 学校 依 托 湖南 师范 大 学 优质 的 教育 资源 ， 并 借鉴 计算 机 技术 王 . 
baike baidu.cory ~ 


EAE 百度 贴吧 


IGO] 华 现 t 教 育 吧 关注 :713 贴 子 -24,237 it 群 职业 教育 学 校 目录 : 无 .本 人 
mas 华 瑞 jos2 班 学 生 一 枚 ,正在 申请 【长 沙 ios ) 贴吧 的 创建 ,希望 大 家 帮 才 ~ 
- Ú 忙 加 个 关注 
2a 
EE iba baidu comite.. ~- men sss 


图 3-3-4 百度 搜索 结果 


d7bdpwN5klmT4phyzkgE4dOSvwskvmkcberpARrYmNNtqNAOzLDICwXJulk&.rsv _ enter = 
0&.rsv_sug3 一 9&rsv_sugl 一 8&rsv_sug7 王 100&inputT 一 160730&rsv_sug4 一 160733 

其 中 在 http://www. baidu. com/# 之 后 的 数据 是 因为 表单 采用 get 方式 提交 而 产生 。 
实际 上 ,# 之 后 就 是 浏览 者 在 表单 中 填写 的 数据 , 当 浏览 器 发 现 表单 的 method 属性 值 为 
get 时 ,将 会 把 表单 中 每 个 表单 元 素 的 数据 组 织 成 为 多 个 名 / 值 对 ,用 连接 符 & 将 这 些 名 / 值 
对 连 成 一 个 字符 串 ,附加 在 表单 的 action 属性 指定 的 表单 处 理 程序 的 地 址 之 后 ,名 / 值 对 中 
的 名 称 即 为 表单 元 素 的 name 属性 值 , 则 名 / 值 对 中 的 值 是 指 表 表单 元 素 的 value 属性 值 。 

将 例 3-3-1 中 的 表单 改 为 get 方式 提交 ,如 例 3-3-2 所 示 。 

例 3-3-2 get 方式 提交 


<html> 
<head> 
<title> 表 单 属性 </title> 
</head> 
<body> 
< form action = "login. html" method = "get"> 
会 员 名 : < input type = "text" name = "name" />< br/> 
密 码 : < input type = "password" name = "pwd" /><br/> 
< input type = "submit" name = "submit" value = "登录 "/> 


Dowoummewmb > 
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10 < input type = "reset" name = "reset" value = " 重 填 " 人 > 
11 </form> 

12 </body> 

13 </html> 


运行 此 页 面 ,填写 会 员 名 为 admin ,密码 为 123456 , 单 击 登录 按钮 提交 到 login. html, 观 
察 转 到 login. html 页 面 浏览 器 地 址 栏 中 的 数据 ,如 下 : 


**/login. html? name=adminë.pwd= 123456 &-submit= %B5%C7%C2%BC 


在 地 址 栏 中 的 /login. html 问号 之 后 有 3 个 名 / 值 对 , 即 name, pwd, submit 是 表单 中 3 
个 表单 元 素 的 name 属性 的 值 ,其 值 分 别 等 于 admin、123456、%B5%C7%C2%BC, 这 3 个 
值 分 别 是 表单 元 素 相 对 应 的 value 值 。 


总 结 


名 表单 用 于 在 浏览 器 和 Web 服务 器 之 间 进 行 数据 交互 。 
名 使 用 < form ></form > 标签 创建 表单 。 
名 使 用 < input/ > 标签 .< textarea></textarea > 标签 .< select ></select> 标 签 及 < option > 


</option> 标 % ,< button ></button > 标签 、< label ></label> 标 签 、< fieldset > 
</fieldset > 标签 及 < legend ></legend > 标签 在 表单 内 部 创建 表单 元 素 。 


名 < input/> 标 签 可 以 创建 多 种 类 型 的 表单 输入 元 素 。 
æ< select ></select > 标签 及 < option ></option > 标签 可 以 创建 列表 框 及 其 内 部 的 


Z< button ></button > 标签 可 以 创建 多 种 类 型 的 按钮 。 
Z< label ></label > 标签 可 以 为 其 他 表单 元 素 创 建 标签 文件 并 与 表单 元 素 进行 绑 定 。 
æ< fieldset ></fieldset > 标签 及 < legend ></legend > 标签 可 以 将 表单 内 部 的 众多 表单 


元 素 进行 分 组 ,并 为 每 一 组 提供 标题 。 


名 表单 提交 指 浏览 器 将 表单 内 部 表单 元 素 的 数据 发 送 到 Web 服务 端 。 表 单数 据 提交 


到 哪个 程序 处 理由 表单 的 action 属性 设置 ,浏览 器 以 哪 种 方式 提交 表单 数据 由 表单 
的 method 属性 设置 。 


课 后 习题 


(1) 使 用 以 下 HTML 代码 实现 的 页 面 效 果 为 下 列 图 示 中 的 ( ) 。( 选 择 一 项 ) 


£ 
2 
3 
4 


< input name = "gen" type = "radio" value = "male" checked = "checked"> 男 

< input name = "gen" type = "radio" value = "female"> 女 

< input type = "checkbox" name = "gen1" value = "male" checked = "checked"> 男 
< input type = "checkbox" name = "gen1" value = "female" > 女 
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.图 3C 男 c+ FE FZ. 








Kac C 女 口 男 FX 


(2) 某 站 点 主页 面 index. html 的 代码 如 下 所 示 , 假 设 在 left. html 中 包含 如 下 链接 代 
码 ,希望 单 击 此 链接 后 在 right. html 的 位 置 显示 链接 的 文档 内 容 , 则 修改 此 链接 为 ( Jis 


(选择 一 项 ) 
1 Index. html 的 代码 : 
2 <html> 
3 < frameset border = "5" rows "20%,*"> 
4 < frame src = "top. html" name = "topframe" scrolling = "no"> 
5 < frameset cols = "20 % , * "> 
6 < frameset sre = "left. html" name = "leftname" scrolling = "no"> 
7 < frame src = "right. html" name = "rightframe"> 
8 </frameset > 
9 </frameset > 
10 </frameset > 
11 </html> 
12 Left. html 的 链接 代码 : 
13 <a href = "login. html"> 登 录 </a> 


是 ( 


A. 
B. 
C. 


D. 


<a href = "login. html" target= "right. html"> 登 录 </a > 
<a href = "login. html" target 一 "rightframe"> 登 录 </a > 
<a href = "right. html" target= "login. html"> 登 录 </a > 


<a href ="rightframe" target= "login. html"> 登 录 </a > 


(3) 在 HTML 上 ,将 表单 中 input 元 素 的 type 属性 值 设 置 为 ( ) 时 ,用 于 创建 重 置 
按钮 。( 选 择 一 项 ) 


A. reset B. set C. button D. image 

(4) 某 站 点 主页 面 index. html 的 代码 如 下 所 示 , 则 选项 中 关于 这 段 代 码 的 说 法 正确 的 
)。 (选择 一 项 ) 
<html> 


voon O 0 8 wne 


< frameset border = "5" cols = " * ,100"> 
< frameset rows = "100, * "> 
< frame src = "top. html"name = "topFrame" scrolling = "No" /> 
< frame src = "left. html"name = "1eftFrame" /> 
</frameset > 
< frame src = "right. htm1"name = "rightFrame" scrolling = "No"/> 
</frameset > 


</html> 
页 面 共 分 为 3 部 分 
B. top. html 显示 在 页 面 的 上 半 部 分 ,其 宽度 与 窗口 宽度 一 致 


C. 


left. html 显示 在 页 面 的 左下 部 分 ,其 高 度 为 100 像素 
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D. right. html 显示 在 页 面 的 右 下 部 分 ,其 高 度 小 于 窗口 高 度 
(5) 在 HTML 中 ,表单 中 input 元 素 的 ( ) 属 性 用 于 指定 表单 元 素 的 名 称 。( 选 择 
=m) 


A. value B. name C. type D. size 
(6) Æ HTML 中 ,下 列 HTML 代码 为 ( ) ,用 于 表示 其 中 默认 选中 项 为 “ 蓝 色 ”。 
(选择 一 项 ) 
A. 请 选择 颜色 : 


< select name = " select"> 
< value >#T f&</value > 
< value selected = "selected"> 蓝 色 </value> 
<value> 绿 色 </value > 

</select> 


B. 请 选择 颜色 : 


< selected name = "select"> 
< value > 红色 </value> 
< value selected = "select"> 蓝 色 </value> 
< value > 绿色 </value> 

</selected> 


C. 请 选择 颜色 : 
< select name = "select"> 
< option > 红色 </ option > 
< option selected = "selected"> 蓝 色 </ option > 


< option > 绿色 </ option > 
</select> 


D. 请 选择 颜色 : 


< selected name = "select"> 
< option > 红色 </ option > 
< option selected = "select"> 蓝 色 </ option > 
< option > 绿色 </ option > 

</selected> 


(7) 在 HTML 上 ,将 表单 中 input 元 素 的 type 属性 设置 为 ( ) 时 ,用 于 创建 重 置 按 
钮 (选择 一 项 ) 。 


A. reset B. set C. button D. image 
(8) 以 下 表单 控件 中 ,不 是 由 input 标记 符 创 建 的 为 ( ) (选择 一 项 ) 。 
A. 单 选 按钮 B. 口令 框 C. 选项 菜单 D. 提交 按钮 


(9) 要 给 表单 控件 设置 标签 ,以 下 代码 中 正确 的 是 ( ) (选择 一 项 ) 。 
A. < input type = "checkbox" name = "news">< label for = "news"> 新 闻 </label> 
B. < input type = "checkbox" for = "news">< label id = "news"> 新 闻 </label> 
C. < input type = "checkbox" for = "news">< label name = "news"> 新 闻 </label> 
D. < input type = "checkbox" id = "news">< label for = "news"> 新 闻 </label> 








68 ”使 用 HTML 和 CSS 开 发 Web 网 站 

















(10) 若 要 产生 一 个 4 行 30 列 的 多 行文 本 域 ,以 下 方法 中 ,正确 的 是 ( )。 (选择 


一 项 ) 。 
。< input type = "text" rows = "4" cols = "30" name = "txtintrol"> 


< textarea rows = "4" cols = "30" name = "txtintro"> 


O = > 


< textarea rows = "4" cols = "30" name = "txtintro"></textarea > 
D. < textarea rows = "30" cols = "4" name = "txtintro"></textarea > 
(11) 用 于 设置 文本 框 显示 宽度 的 属性 是 ( ) 。 (选择 一 项 ) 。 


A. size B. maxlength C. value 


D. length 


(12) 若 要 获得 名 为 login 的 表单 中 ,名 为 txtuser 的 文本 输入 框 的 值 , 以 下 获取 的 方法 


中 ,正确 的 是 ( ) 。( 选 择 一 项 )。 
A. username=login. txtser. value 
B. username= document. txtuser. value 
C. username=document. login. txtuser 


D. username= document. txtuser. value 


(13) 请 用 HTML 编写 如 下 的 表单 。 


火 姓 名 二 出 生日 [ ° 3e g, [3 B 





炎 身 份 证 号 码 | kisti. ANENA. tm 





x HESI 男 xl n gl 汉族 | 








婚姻 状况 R 司 anug [| hun =m 








户口 所 在 地 | [ eree] maaa 「 renea] 











身高 Mit MOK 
视力 状况 请 用 文字 撕 过 称 的 视力 情况 
现 工作 单位 名 称 " 


hik CRR) 0 Riki T ft p 2 6 OERE 





类 现 从 事 工 作 职 位 名 称 如 :公司 部 





现职 称 级 别 win- E 





现 从 事 工作 级 别 | [PRR awen 





六 现 从 事 职位 类 别 | [ras 可 [mm 可 wm T 





从 事 现职 位 年 限 [o z| 








保 作 以 上 修改 
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区 本 章 目 标 》 


?理解 使 用 框架 集 和 框架 实现 浏览 器 窗口 中 多 文档 的 显示 
名 理解 框架 集 与 框架 的 关系 

可 掌握 框架 的 属性 

避 掌 握 框 架 集 的 谋 套 使 用 

名 掌握 浮动 框架 

名 理解 超 链接 和 表单 的 目标 框架 或 目标 窗口 

名 理解 基准 目标 


Er 
请 在 预习 时 学 会 下 列 单词 的 含义 和 发 音 , 并 填写 在 横 线 处 。 


from: 





set: 





© scroll; 





. resize: 





. target: 





base: 





self; 
. blank; 


. parent: 








oona m = Q r = 





4.1 框架 与 框架 集 的 关系 


在 一 个 网 页 中 ,并 不 是 所 有 的 内 容 都 需要 改变 ,如 网 页 的 导航 栏 、 网 页 页 脚 等 部 分 是 不 
需要 改变 的 ,如 果 在 每 一 个 网 页 中 都 重复 添加 这 些 元 素 ,不 仅 会 浪费 时 间 , 而 且 在 浏览 时 也 

















70 ”使 用 HTML 和 CSS 开 发 Web 网 站 








会 带 来 不 便 ,耗费 更 多 的 时 间 , 为 了 解决 这 种 问题 ,我 们 可 以 使 用 框架 对 网 页 进行 布局 。 

使 用 框架 可 以 把 浏览 器 窗口 划分 为 多 个 区 域 ,每 个 区 域 可 以 显示 不 同 的 网 页 ,每 次 浏览 
者 在 访问 框架 页 面 时 ,只 下 载 框架 页 面 中 变化 的 区 域 ,对 于 不 变 的 区 域 ,不 用 重新 下 载 ,从 而 
给 浏览 者 带 来 方便 、 节 省 下 载 页 面 所 需 的 时 间 。 

一 个 框架 结构 是 由 以 下 两 部 分 组 成 的 : 

HEZE (frame); 是 浏览 器 窗口 中 的 一 个 区 域 , 它 可 以 显示 与 浏览 器 窗口 其 余部 分 中 所 显 
示 内 容 无 关 的 网 页 文件 。 

框架 集 (frameset) : 是 一 个 网 页 文件 , 它 将 一 个 窗口 通过 横向 或 纵向 的 方式 分 割 成 多 个 
框架 ,每 个 框架 中 要 显示 的 都 是 不 同 的 网 页 文件 。 不 同 的 网 页 文件 可 以 通过 超 链 接 联系 
起 来 。 

如 图 4-1-1 所 示 就 是 一 个 比较 经 典 的 框架 集 页 面 。 此 页 面 一 共有 3 个 区 域 , 每 个 区 域 
分 别 显示 一 个 HTML 文档 ,由 于 框架 集 页 面 也 是 一 个 HTML 文档 ,所 以 一 共有 4 个 
HTML 文件 。 为 了 浏览 方便 , 当 浏览 者 单 击 左 侧 导 航 栏 中 的 服务 列表 (如 * 注 册 ë. 认证 ”、 
“ 买 家 帮助 ”等 ) 超 链接 时 , 右 侧 窗口 显示 相应 的 详细 帮助 信息 。 


框架 集 页 面 网 页 学 习 网 
(ErameSet.htm) WANGYEXX.COM 





详细 内 容 
面 右 侧 框架 


(main.htm) 








4-1-1 框架 集 页 面 


4.1.1 为 何 使 用 框架 


一 个 网 页 可 以 有 一 个 或 多 个 框架 。 框 架 的 一 些 用 法 如 下 : 

切 在 页 面 的 一 个 固定 部 分 显示 Logo 或 静态 信息 。 

芯 左 侧 框架 显示 目录 , 右 侧 框架 显示 内 容 , 用 户 只 需 单 击 左 侧 和 窗口 的 目录 ,在 右 侧 窗口 
中 就 会 显示 相应 内 容 , 如 网 上 在 线 学 习 教 程 .论坛 .后 台 管理 .产品 介绍 等 。 

避 框 架 能 有 机 地 把 多 个 页 面 组 合 在 一 起 ,这 多 个 页 面 之 间 可 互相 独立 , 却 又 可 相互 
联系 。 


4.1.2 框架 集 的 基本 结构 
框架 集 (frameset) 页 面 的 结构 是 通过 属性 rows 和 cols 来 设置 的 ,根据 框架 的 分 割 方 式 
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可 分 为 : 上 下 分 割 窗口 (使 用 rows 属性 来 分 割 ) 左右 分 割 窗口 (使 用 cols 属性 来 分 割 ) x 
套 分 割 窗 口 (同时 使 用 rows 和 cols 属性 来 分 割 ) 。 
语法 : 


< frameset cols = "25%,50%, *" rows = "50 $ , * " border = "5"> 
<! —— cols = "25 % ,50 % , * "分 割 为 左 中 右 3 部 分 rows = "50% , * "分 割 为 上 下 两 部 分 border 设置 
边框 属性 -一 > 


< frame src = "the_first. html "> 


</frameset > 


说 明 : 

frameset 仅 是 一 个 框架 的 集合 。frame 标签 可 以 提供 对 单独 HTML 文档 URL 引用 ， 
其 中 每 个 HTML 文档 占据 一 个 框架 。cols 将 页 面 沿 垂直 方向 分 割 为 几 个 窗口 ,cols 可 以 取 
多 个 值 ,不 同 的 值 用 逗号 隔 开 ,单位 可 以 是 像素 ,也 可 以 是 占 浏览 器 的 百分比 。rows 将 页 面 
沿 水 平方 向 分 割 为 几 个 窗口 ,也 可 以 取 多 个 值 ,是 由 逗号 分 隔 的 像素 值 或 百分比 。src 指定 
框架 窗口 的 源 文件 。 

例 4-1-1 是 将 窗口 水 平方 向 分 割 为 上 中 下 3 个 窗口 。 

例 4-1-1 上 下 分 割 窗 口 


1 <html> 

2 <head> 

3 <title> rows 框架 </title> 

4 </head> 

5 < frameset bordercolor = "red" rows = "25 % ,50 % , * " border = "5" > 
6 <! -- bordercolor = "red" 设 置 框架 边框 为 红色 -- > 
7 < frame name = "top" src = "the_first.html"> 

8 < frame name = "middle" src = "the_second. htm1"> 
9 < frame name = "bottom" src= "the third. html"> 

10 </frameset > 

11 </html> 


例 4-1-1 在 浏览 器 中 的 预览 效果 如 图 4-1-2 所 示 。 
例 4-1-2 中 是 将 窗口 垂直 方向 分 割 为 左右 两 个 窗口 。 
例 4-1-2 ”左右 分 割 窗口 


1 <html> 

2 <head> 

3 <title> cols 框架 </title> 

4 </head> 

5 < frameset cols = "120, * " border = "5"> 

6 < frame src = "the_first. html" name = "topFrame"> 

? < frame src = "the_second. htm1" name = "mainFrame" > 
8 </frameset > 

9 </html> 
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这 是 第 一 个 窗口 


这 是 第 二 个 窗口 


这 是 第 三 个 窗口 





G Row ~ 
图 4-1-2 上 中 下 分 割 窗口 
例 4-1-2 在 浏览 器 中 预览 效果 为 两 个 窗口 左右 分 割 ,而 左边 的 窗口 固定 宽度 120px。 在 


浏览 器 中 的 预览 效果 如 图 4-1-3 所 示 。 


E cewdypeopwaaxnxob EY (COE 
Ye GR: | s e) 建议 网 站 ” 此] RRESHT 
Ecoe -D-5 é + mm Ro o @- ” 








这 是 第 一 个 这 是 第 二 个 窗口 
窗口 








图 4-1-3 左右 分 割 窗口 


第 4 章 ”框架 集 与 框架 73 
全 一 一 一 一 一 一 一 一 一 一 一 


4.1.3 框架 集 的 属性 
框架 集 的 属性 见 表 4-1-1。 
表 4-1-1 框架 集 属性 





属 性 #f Ë 





垂直 切割 窗口 (如 左右 分 割 两 个 窗口 ) 接 受 整数 值 ,百分数 , * (* 代表 占用 余下 空间 ) 
数值 的 个 数 代表 分 成 的 部 分 数目 ,要 以 逗号 分 隔 。 例 如 : cols="30, * ,50%" 可 以 切 
成 3 个 视窗 ,第 一 部 分 是 30 像素 (pixels) ,为 绝对 分 割 ; 第 二 部 分 是 当 分 配 完 第 一 视 
图 和 第 三 视图 后 剩 下 的 空间 ; 第 三 部 分 则 占 整个 窗口 的 50% 宽 度 , 为 相对 分 割 


cols 





rows 横向 切割 ,将 窗口 上 下 分 开 , 数 值 设置 同上 





border 设置 框架 边框 厚度 , 即 frame 之 间 的 距离 








示例 见 例 4-1-2。 
4.1.4 框架 的 属性 
框架 的 属性 见 表 4-1-2。 


























表 4-1-2 框架 属性 
属 性 描 述 
name 框架 名 称 ,指定 框架 来 做 连接 的 目标 窗口 
src 框架 中 要 显示 的 网 页 文档 URL 地 址 ,每 一 个 框架 要 对 应 一 个 HTML 文档 
scrolling 是 否 显示 滚动 条 ,其 值 有 yes/no,auto( 自 动 ) 
noresize 设置 不 让 使 用 者 改变 这 个 框架 的 大 小 
marginHeight 设 定 在 显示 frame 中 的 文字 之 前 文字 距离 顶部 及 底部 的 空白 距离 
marginWidth 设 定 在 显示 frame 中 的 文字 之 前 文字 距离 左右 两 边 的 空白 距离 
决定 是 否 在 frame 中 显示 边界 。 可 以 使 用 的 值 有 4 个, 分别 是 1、0、no、 yess 
frameborder frameborder 值 为 1 或 yes, 则 会 显示 框 线 ; frameborder 值 为 0 或 no, 则 不 会 显示 
框 线 ; frameborder 的 默认 值 为 1 


示例 见 例 4-1-3。 
例 4-1-3 框架 属性 


<html> 
<head> 
< title > 框架 属性 </title> 
</head> 
< frameset rows = "25 % ,25 % , * " border = "5"> 
< frame name = "third" src = "the third.html" scrolling = "no" marginHeight = 80 
marginWidth= 20 > 
< frame src = "the first.html" name = "topFrame" noresize = "noresize" marginHeight = 80 
marginWidth = 20 > 
< frame src = "the second. html" name = "mainFrame" scrolling = "yes"> 
11 </frameset> 
12 </html> 
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其 运行 效果 见 图 4-1-4。 
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这 是 第 三 个 窗口 





这 是 第 一 个 窗口 


这 是 第 二 个 窗口 








图 4-1-4 框架 属性 


4.2 ”框架 集 的 谋 套 


在 另 一 个 框架 集 之 内 的 框架 集 称 作 嵌 套 的 框架 集 。 一 个 框架 集 文件 可 以 包含 多 个 嵌 套 
的 框架 集 。 大 多 数 使 用 框架 的 Web 页 实际 上 都 使 用 嵌 套 的 框架 ,并 且 在 HTML 中 大 多 数 
预定 义 的 框架 集 也 使 用 嵌 套 。 如 果 在 一 组 框架 里 ,不 同行 或 不 同 列 中 有 不 同 数目 的 框架 , 则 
要 求 使 用 嵌 套 的 框架 集 。 

例如 ,最 常见 的 框架 布局 在 顶 行 有 一 个 框架 (框架 中 显示 公司 的 微 标 ) ,并 且 在 底 行 有 两 
个 框架 (一 个 导航 框架 和 一 个 内 容 框 架 )。 此 布局 要 求 嵌 套 的 框架 集 为 一 个 两 行 的 框架 集 ， 
在 第 二 行 中 赃 套 了 一 个 两 列 的 框架 集 。 

有 两 种 方法 可 在 HTML 中 嵌 套 框架 集 : 内 部 框架 集 可 以 与 外 部 框架 集 在 同一 文件 中 
定义 ,也 可 以 在 不 同文 件 中 单独 定义 。Dreamweaver 中 每 个 预定 义 的 框架 集 均 在 同一 文件 
中 定义 其 所 有 框架 集 。 

示例 见 例 4-2-1。 

例 4-2-1 ERRE 

1 <html> 


<head> 
3 <title > 框架 舱 套 </title> 
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4 </head> 

5 < frameset rows = "20%, *, 15%"> 

6 < frame src = "the_first. html" /> 

T < frameset cols = "20%, *"> 

8 < frame src = "the_second. html " /> 
9 < frame src = "the_third. html" /> 
10 </frameset > 

11 < frame src = "the_four. html" /> 

12 </frameset > 

13 </html> 


其 运行 效果 见 图 4-2-1。 


Cm m= /om 





这 是 第 一 个 窗口 





这 是 第 三 个 窗口 
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这 是 第 四 个 窗口 E 
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图 4-2-1 HERRE 


4.3 窗口 间 的 关联 


网 页 中 常 有 单 击 左 侧 窗口 中 的 导航 栏 链接 ,在 右 侧 窗口 将 显示 对 应 的 内 容 , 这 是 怎么 实 
现 的 呢 , 这 就 用 到 了 本 小 节 将 要 讲 的 窗口 间 的 关联 。 

窗口 间 的 关联 是 通过 超 链 接 的 target 属性 来 实现 的 ,具体 的 实现 思路 如 下 。 

在 框架 页 面 中 ,为 右 侧 框架 窗口 添加 name 名 称 标识 ,在 左 侧 窗口 对 应 的 页 面 中 ,设置 
超 链接 target 属性 为 希望 显示 的 框架 窗口 名 ,其 实现 代码 见 例 4-3-1。 

例 4-3-1 窗口 间 的 关联 





1 <html> 
2 <head> 
3 <title> 窗 口 间 的 关联 </title> 
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4 </head> 

5 < frameset rows = "20%, *, 15%"> 

6 < frame src = "the_first. html" /> 

7 < frameset cols= "20%, %* "> 

8 < frame src = "the_second. html " name = "the four" /> 
9 < frame src = "the_third. htm1" /> 

10 </frameset > 

11 </frameset > 

12 </html> 


其 运行 效果 见 图 4-3-1、 图 4-3-2。 
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这 是 第 一 个 窗口 链接 到 第 四 个 窗口 








这 是 第 三 个 窗口 | 这 是 第 三 个 窗口 
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图 4-3-1 跳 转 前 图 4-3-2 跳 转 后 


4.4 <iframe > im HEZE 


前 面 学 习 了 框架 集 < frameset >, 它 适用 于 整个 页 面 都 用 框架 实现 的 场合 。 本 节 将 学 习 
< iframe > 内 符 框 架 , 它 适 用 于 将 部 分 框架 内 内 入 页 面 的 场合 ,一 般 用 于 引用 其 他 网 站 的 页 
面 。 例 如 ,在 自己 制作 的 网 页 中 引用 新 闻 网 页 等 。 


4.4.1 <iframe > 的 用 法 
<iframe > 用 法 和 < frame > 比较 类 似 ,其 语法 如 下 : 


< iframe src = "引用 页 面 地 址 "></iframe> 
其 示例 见 例 4-4-1。 
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例 4-4-1 iframe A RE 2 


1 <html> 

2 <head> 

3 <title> iframe </title> 

4 </head> 

5 <iframe src= "http://www. baidu. com" width = "50 %" height = "70 % "> 
6 </frameset > 

7 </html> 


其 运行 效果 见 图 4-4-1。 











未 知 区 域 混合 ) | 保护 模式 SAE 给 > R100% ~ 





图 4-4-1 iframe Pq ik fE 3 


4.4.2 < iframe > 的 属性 


类 似 前 面 学 习 的 < frameset > 框架 ,< iframe > P IË H 38 nt) 36 JI] JR PE GL JE name, 
scrolling .noresize ,frameborder, 这 些 属性 的 含义 与 框架 是 一 样 的 , 详 见 表 4-1-2。 


总 结 


名 常用 的 框架 技术 包括 < frameset > 框架 集 和 < iframe >P HHE. 

< frameset > 框架 集结 构 清 晰 ,适用 于 整个 页 面 都 用 框架 实现 的 场合 ; < iframe > ik 
框架 比较 方便 灵活 ,一 般 用 于 在 页 面 中 引用 站 外 的 页 面 内 容 时 。 

z< frameset > 框架 集 使 用 < frameset > 和 < frame > 标签 实现 ,< frameset > 的 rows 和 
cols 属性 实现 窗口 的 横向 和 纵向 分 割 。 

局 配合 使 用 < a > 标签 的 target 属性 以 及 < frame > 标签 的 name 属性 ,可 以 实现 窗口 间 
的 关联 。 

名 和 < frameset > 框架 相 比 ,< iframe > 内 嵌 框 架 比 较 灵活 ,只 需要 一 句 话 即 可 引用 站 外 
或 站 内 的 某 个 页 面 。 
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课 后 习题 
O 要 创建 一 个 如 图 所 示 的 框架 ,应 使 用 ( 。“) 中 代码 。 


- a à & š 2 3 可 
Hi 


(ED: \ 实 例 \chp4\tu4-30. hta È 





2 


A. < frameset cols = "100, * 
< frame > 
< frameset cols = "120, * "> 
< frane > 
< frane > 
</frameset > 
</frameset > 


B. < frameset rows = "100, * "> 
< frame> 
< frameset cols = "120, * "> 
< frame> 
< frame> 
</frameset > 
</frameset > 


C. <frameset cols = "100, * 
< frame> 
< frameset rows = "120, * "> 
< frame > 
< frame> 
</franeset > 


r 2 


</frameset > 


D. < frameset rows = "100,120, * "> 
< frame > 
< frame> 
< frame > 
</frameset > 


是 ( 
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(2) 以 下 关于 框架 显示 效果 的 说 法 中 ,错误 的 是 ( Je 
A. 只 有 所 有 相 邻 框架 的 边框 都 设置 为 0, 才 能 隐藏 边框 
B. 可 以 在 frame 标记 符 中 使 用 marginWidth 和 marginHeight 属性 控制 框架 内 容 
与 框架 边框 之 间 的 距离 
C. 框架 的 边框 默认 可 以 移动 
D. 框架 默认 时 有 滚动 条 
(3) 有 关 框 架 与 表格 的 说 法 正确 的 有 ( J 
A. 框架 对 整个 窗口 进行 划分 
B. 每 个 框架 都 有 自己 独立 的 网 页 文件 
C. 表格 比 框架 更 有 用 
D. 表格 对 页 面 区 域 进行 划分 
(4) 分 析 下 面 的 HTML 代码 段 , 下 面 描述 正确 的 是 ( )。( 选 择 一 项 ) 





1 <frameset cols= "30 % , * "> 

2 < frameset rows = "50 % ,50 % "> 

3 < frame name = "fx" src = "x. html"> 
4 < frame name = "fy" src = "y. html"> 
5 </franeset > 

6 < frame name = "fz"src = "z. html"> 

7 </frameset> 


A. 在 页 面 中 创建 了 3 个 框架 ,左边 一 列 包含 两 个 框架 (各 占 50%) ,右边 一 列 占 窗 


口 的 70% 

B. 在 页 面 中 创建 了 3 个 框架 ,左边 一 列 占 窗口 的 30% ,右边 一 列 包 含 两 个 框架 (各 
占 50%) 

C. 在 页 面 中 创建 了 3 个 框架 ,上 边 一 行 占 窗口 的 30% ,下 边 一 行 包含 两 个 框架 (各 
占 50%) 

D. 在 页 面 中 创建 了 3 个 框架 ,上 边 一 行 包含 两 个 框架 (各 占 50%) ,下 边 一 行 占 窗 
口 的 70% 


(5) 某 站 点 主页 面 index. html 的 代码 如 下 所 示 , 则 选项 中 关于 这 段 代 码 的 说 法 正确 的 


)。 (选择 一 项 ) 
1 <htnl> 
2 < frameset border = "5"cols =" * ,100"> 
3 < frameset rows = "100, * "> 
4 < frame 
5 src= "top. html"name = "topFrame" scrolling = "No" /> 
6 < frame src = "left. html"name = "leftFrame"/> 
7 </franeset > 
8 < frame src = "right. html"name = "right 
9 Frame"scrolling = "No" /> 
10 </frameset > 
11 </html> 
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该 页 面 共 分 为 3 部 分 。 
A. top. html 显示 在 页 面 的 上 半 部 分 ,其 宽度 和 窗 体 宽度 一 致 
B. left. html 显示 在 页 面 的 左下 部 分 ,其 高 度 为 100 像素 
C. right. html 显示 在 页 面 的 右 下 部 分 ,其 高 度 小 于 窗口 高 度 
(6) 在 HTML 中 ,框架 将 Web 浏览 器 窗 体 分 割 为 多 个 独立 的 区 域 ,设计 者 可 以 使 用 
( ) 标 签 来 创建 框架 集 。( 选 择 一 项 ) 
A. <head > B. < div > 
C. <body > D. < frameset > 
(7) 请 用 HTML 编写 如 下 的 页 面 。 


Frame 
c 








(8) 编写 如 下 图 所 示 效 果 对 应 的 HTML 代码 。 


HTML 语 言 是 网 页 制作 的 基础 ， 是 初学 
者 必 学 的 内 容 。 
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(9) 请 用 HTML 编写 如 下 的 页 面 。 





走 进 我 们 当前 位 置 : 网 站 首页 >> 走 进 我 们 >> 发 展 历程 


发 展 历程 


一 一 2008 年 8 月 ， 商 业 可 行 性 调研 启动 : 南大 苏 富 特 组 建 了 一 支 国际 化 的 专业 团队 ， 由 摩 言 迅 
( 港 ) NIC GM. Manmeet Sigh (印度 ) 资深 外 竹 顾 问 、 戴 超 (南大 苏 富 特 服务 外 包 北 务 领航 者 ) 
针对 培训 项 目 进行 可 行 性 调研 与 商业 策划 ; 

一 一 2008 年 8-9 月 ， 起 跑 点 : 南大 苏 富 特 总 部 ; 


一 一 2008 年 9 月 24 日 ， 与 IB8 (中 国 ) 有 限 公司 大 中 华 区 高 级 经 理 届 中 华 先生 在 南京 会 是 ; 
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a Tie CSS 样式 表 的 基本 作用 

z FAE CSS 样式 规则 的 语法 

名 理解 各 种 选择 器 

名 理解 样式 规则 声明 编写 在 何 处 以 及 怎么 使 用 





请 在 预习 时 学 会 下 列 单词 的 含义 和 发 音 , 并 填写 在 横 线 处 。 
. style: 





. declaration: 





. background: 





. decoration: 








. width; 





. font: 





. weight: 





1 
2 
3 
4 
5. height; 
6 
rd 
8 
9 


. collapse: 





10. italic: 





11. link: 





12. visited: 





13. hover: 
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5.1 CSS 样式 表 


5.1.1 CSS 是 什么 


也 许 你 曾 听 说 过 CSS, 但 并 不 真正 清楚 CSS 到 底 是 什么 。 在 本 章 , 将 学 到 更 多 CSS 的 
知识 ,并 了 解 CSS 可 以 做 些 什么 。 
CSS 是 Cascading Style Sheets 的 缩写 ,一 般 翻 译 为 层 释 样式 表 。 


5.1.2 CSS 的 作用 


在 Tim Berners-Lee 发 明 万 维 网 (World Wide Web) 的 那个 年 代 ,HTML 语言 是 唯一 用 
于 给 文本 添加 结构 的 语言 。 作 者 可 以 通过 声明 “这 是 一 个 标题 "(利用 hl 标签 ) 或 “这 是 一 个 
段落 "(利用 p 标签 ) 的 方式 来 标记 文本 。 

随 着 Web 逐渐 流行 起 来 ,网 页 设计 者 们 开始 寻求 为 网 页 增添 布局 的 可 能 性 。 为 此 , 当 
时 的 浏览 器 厂商 们 (网 景 公 司 和 微软 公司 ) 发 明了 一 些 新 的 HTML 标签 (如 < font > 等 ), 引 
入 了 新 的 布局 一 一 而 非 新 的 结构 。 

这 也 导致 了 原本 用 于 进行 文本 的 结构 化 的 标签 (如 < table > 等 ) 越 来 越 多 地 被 误 用 于 进 
行 页 面 的 布局 。 许 多 新 的 布局 标签 (如 < blink >) 只 有 一 种 浏览 器 支持 。“ 您 需要 使 用 某 某 
浏览 器 来 浏览 本 页 面 ?成 为 当时 常见 于 许多 网 站 的 声明 。 

CSS 的 发 明正 是 为 了 改善 这 一 状况 , 它 为 Web 设计 师 们 提供 了 完善 的 .所 有 浏览 器 都 
支持 的 布局 能 力 。 

W3C 的 构想 是 HTML 标签 只 表示 内 容 结 构 , 即 只 表示 “这 是 一 个 段落 ”这 是 一 个 标 
题 " 等 含义 ,而 不 具备 任何 样式 ,而 这 些 “ 有 段落 “标题 "等 内 容 的 字体 字形 、 大 小 、 显 示 位 置 等 
样式 ,完全 由 CSS 指定 ,从 而 实现 样式 和 结构 的 分 离 , 所 以 W3C 制定 了 相应 的 HTML 和 
CSS 两 套 标准 。 

HTML 可 以 用 于 为 网 站 添加 布局 效果 ,但 有 可 能 被 误 用 。 而 CSS 则 提供 了 更 多 选择 ， 
而 且 更 为 精确 .完善 ,现在 使 用 CSS 样式 具有 如 下 的 突出 优势 。 

局 实现 内 容 和 样式 的 分 离 , 利 于 团队 开发 。 

样式 美化 可 以 由 美工 人 员 专 门 负 责 , 而 内 容 部 分 由 软件 开发 人 员 负 责 。 内 容 样式 实现 
了 分 离 之 后 ,减少 了 Web 页 面 的 代码 量 , 使 得 Web 页 面 内 容 结构 更 加 突出 ,更 利于 搜索 引 
擎 的 搜索 。 

忌 实 现 样式 复 用 ,提高 开发 效率 。 

同一 网 站 的 多 个 页 面 可 以 共用 同一 个 样式 表 , 提 高 了 网 站 的 开发 效率 ,同时 也 方便 了 网 
站 的 维护 和 更 新 。 例 如 要 更 改 网 站 的 外 观 、 字 体 大 小 颜色 等 ,只 需要 修改 样式 表 文 件 即 可 。 

饼 实 现 页 面 的 精确 控制 。 

CSS 具有 强大 的 样式 控制 和 排版 能 力 。CSS 包含 文本 、 列 表 、 超 链接 、 边 距 等 丰富 的 各 
类 样式 ,可 以 实现 各 种 复杂 、 精 美的 页 面 效 果 。 
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图 5-1-1 为 应 用 CSS 样式 前 后 的 对 比 效果 。 
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5-1-1 应 用 CSS 样式 的 前 后 对 比 


CSS 样式 的 两 大 用 途 是 页 面 内 容 修 饰 和 页 面 布 局 。 下 面 先 介绍 CSS 的 基本 布局 ,再 介 


绍 页 面 内 容 修 饰 ,页 面 布 局 放 到 下 一 童 再 来 讲解 。 


5.2 CSS 样式 规则 声明 


样式 表 由 样式 规则 组 成 ,这 些 规则 告诉 浏览 器 如 何 显 示 文 档 。 一 个 样式 (Style) 的 基本 
语法 由 三 部 分 构成 : 选择 器 ` 属 性 和 属性 值 ,我 们 先 来 了 解 其 基本 结构 及 其 相关 概念 。 


层 倒 样式 一 般 用 < style > 标签 来 声明 样式 规则 , 即 告 诉 浏览 器 页 面 中 各 类 内 容 豆 


元 素 应 如 何 显示 ,其 基本 结构 如 下 。 


1 <style type = "text/css"> 

2 选择 器 selector{ 

3 对 象 的 属性 propertyl :属性 valuel; 
4 对 象 的 属性 property2: 属 性 value2; 
5 } 

6 </style> 


或 页 面 


选择 器 selector 是 某 个 HTML 标签 的 名 称 或 自 定义 的 名 称 。 属 性 property 是 你 期 望 
控制 的 样式 的 某 个 方面 ,如 字体 .颜色 ,边框 背景 等 。 属 性 需要 有 一 个 或 多 个 value 值 。 


属性 名 和 值 可 以 由 多 对 同时 出 现 , 多 对 之 间 用 ;( 分 号 ) 隔 开 , 属 性 名 和 值 之 间 用 : 
连接 。 它 们 集中 放置 在 一 对 {} (大 括号 ) 中 ,而 选择 器 则 说 明 这 个 样式 在 网 页 中 的 适 月 

这 3 个 部 分 组 合 起 来 就 构成 了 一 条 样式 规则 声明 declaration。 

样式 规则 一 般 放 在 网 页 头 部 < head ></head > 内 部 的 < style ></style > 标签 中 。 

例 s-2-1 注 的 样式 设置 





1 <style type = "text/css"> 
2 lif 
3 color:red; 


(冒号 ) 
范围 。 
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4 font- size:30px; 

5 font — family: 黑 体 ; 
6 

7 </style> 


例如 上 面 这 一 段 样式 ,就 是 设置 页 面 里 所 有 的 < 1i> 标 签 文字 颜色 为 红色 ,字体 大 小 为 


30px, 字 体 类 型 为 黑体 。 
例 5-2-2 
1 <html> 
2 <head> 
3 <title> 样 式 规则 声明 </title> 
4 < style type = "text/css"> 
5 body{ 
6 background - image:url( imgs/al. png); 
7 background - repeat :no — repeat; 
8 È 
9 pt{ 
10 font — size:30px; 
41 color:red; 
12 text-align:left; 
13 1 
14 </style> 
15 </head> 
16 <body> 


17 <p> 床 前 明月 光 , 疑 是 地 上 和 霜 。 举 头 望 明月 ,低头 思 故 乡 。 日 照 香炉 生 紫 烟 , 遥 看 瀑布 挂 前 川 。 
18 飞 流 直下 三 千 尺 , 疑 是 银河 落 九 天 。 君 不 见 黄河 之 水 天 上 来 ,奔流 到 海 不 复 回 。</p> 


代码 运行 结果 如 图 5-2-1 所 示 。 


£ O- c x | @ mwe 


明月 光 ， 疑 是 地 上 霜 。 举 头 望 明月 ， 低 头 思 故 乡 。 


香炉 生 紫 烟 ， 遥 看 瀑布 挂 前 川 。 飞 流 直下 三 干 斥 ， 
s 5 a 1. 





5-2-1 应 用 CSS 样式 的 效果 


说 明 : 

上 述 代码 中 ,在 网 页 头 部 < head ></head > 标签 中 添加 了 < style ></style > 标签 ,定义 了 
此 页 面 的 样式 表 。 样 式 表 中 包含 了 两 条 样式 规则 声明 。 第 一 条 : 告知 浏览 器 在 显示 < body > 
</body > 标签 时 ,为 它 显示 背景 图 像 并 且 不 可 重复 ; 第 二 条 : 告知 浏览 器 在 显示 段落 时 , 设 
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定 了 字体 的 颜色 为 红色 ,字体 大 小 为 30px, 并 且 字 体 是 居 左 。 
代码 编写 规范 需求 。 
名 虽然 CSS 代码 不 区 分 大 小 写 ,但 推荐 全 用 小 写 。 
每 条 样式 规则 用 分 号 (;) 隔 开 ,一般 写 为 多 行 ,简单 的 规则 也 可 合并 为 一 行 。 
名 当 CSS 代码 较 多 时 ,可 以 使 用 */ * ...... * /” 添 加 必要 的 注释 。 














5.3 选择 器 的 分 类 


一 条 样式 规则 声明 中 包含 选择 器 , 它 的 作用 是 说 明 这 条 样式 规则 在 网 页 中 的 适用 范围 ， 
或 者 说 网 页 中 的 哪个 地 方 或 者 哪些 地 方 需要 用 到 它 。 在 代码 示例 5-2-2 中 ,body 和 p 就 是 
这 两 条 规则 声明 中 的 选择 器 。 第 一 条 规则 对 网 页 正文 即 < body ></body > 有 效 ,第 二 条 规 
则 则 对 网 页 中 所 有 的 段落 即 <p ></p > 有效 。 这 种 选择 器 的 名 称 是 一 个 合法 的 HTML 标 
签 的 名 称 , 就 是 我 们 将 要 详细 学 到 的 标签 选择 器 ,除了 标签 选择 器 ,还 将 要 学 习 其 他 几 种 选 
FERE o 

5.3.1 标签 选择 器 

当 需 要 对 页 面 内 某 标签 的 内 容 进行 修饰 时 ,使 用 标签 选择 器 ,这些 标 签 可 以 是 我 们 以 前 
学 过 的 HTML 标签 ,其 用 法 如 下 : 

标签 名 { 

属性 名 1: 值 1; 


属性 名 2: 值 2; 
} 


例 5-3-1 标签 选择 器 示例 


1 <html> 

2 <head> 

3 <title > 标签 选择 器 </title> 

4 < style type = "text/css"> 

5 hi{text - align:center; } 

6 input(border:lpx solid gray;background - color: # fedcba; color:blue;} 
7 a[text — decoration:none;} 

8 </style> 

9 </head> 

10 <body> 


11 ”<hl> 登 录 </hl> 


12 <form> 


13 账号 : < input type = "text" />< br/> 

14 密码 : < input type = "password" />< br/> 
15 < input type = "submit" value = "登录 " /> 
16 < input type = "reset" /> 


17 </form> 
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18 <ahref =" 井 "> 注册 </a> 
19 </body> 
20 </html> 


代码 运行 结果 如 图 5-3-1 所 示 。 

















图 5-3-1 标签 选择 器 示例 


说 明 : 

上 述 例 子 中 ,用 到 了 3 个 标签 选择 器 ,分 别 为 hl 标签 .input 标签 和 a 标签 。 在 body 前 
分 ,所 有 的 hl 标签 中 内 容 会 居中 显示 ,表单 中 的 input 标签 中 ,设置 了 灰色 1 像素 大 小 的 边 
框 和 背景 色 , 输 入 的 字体 为 蓝 色 ,a 标签 中 去 掉 了 下 夯 线 。 

还 可 以 使 用 * 通配符 代表 所 有 的 HTML 标签 。 


Ee 
2 font- size:15px; 
3 


用 * 作为 选择 器 名 称 的 样式 规则 将 作用 于 所 有 的 标签 。 

需要 注意 ,本 例 为 了 讲解 方便 ,将 样式 修饰 的 CSS 代码 单独 放 到 < head > 标签 之 内 来 实 
现 内 容 和 样式 分 离 ,但 W3C 推荐 采用 更 彻底 的 样式 分 离 方式 ,即将 样式 文件 单独 放 在 另 一 
个 样式 文件 中 ,后 续 章节 将 会 进行 深入 的 讲解 。 


5.3.2 类 选择 器 


学 习 了 标签 选择 器 之 后 ,会 发 现 它 修 饰 的 范围 比较 广 ,假如 我 们 有 一 系列 的 < li > 元素 ， 
现在 希望 其 中 的 一 些 元 素 和 其 他 的 元 素 样 式 不 同 , 该 如 何 实现 呢 ? 这 就 是 我 们 现在 所 要 学 
习 的 一 个 新 的 选择 器 , 称 为 类 选择 器 。 类 选择 器 类 似 于 我 们 Java 中 学 习 的 class) ,使 用 
步骤 分 为 以 下 两 步 : 

(1) 定义 样式 。 

-类 名 { 


属性 名 1: 值 1; 
属性 名 2: 值 2; 


88 











使 用 HTML 和 CSS 开 发 Web 网 站 














(2) 应 用 样式 。 

使 用 标签 的 class 属性 引用 类 属性 , 即 < 标签 名 class 一 "类 名 "> 标签 内 容 </ 标 签名 >。 

注意 : 

定义 class 样式 时 ,类 名 前 面 有 一 个 点 号 (. ) ,应 用 样式 时 不 需要 点 号 。 类 名 可 以 自己 定 
X ,但 必须 符合 样式 标识 符 规范 ,不 能 以 数字 开头 。 

现在 来 解决 刚才 所 说 的 问题 。 

例 5-3-2 类 选择 器 示例 


1 <html> 

2 <head> 

可 <title> 类 选择 器 </title> 

4 < style type = "text/css"> 

5 li{ 

6 color:blue; 

7 font- family: Ë P; 

8 font — size:30px 

9 } 

10 .red{ 

11 color:red; 

12 } 

13 </style> 

14 </head> 

15 <body> 

16 <div> 

17 <ul> 

18 < li class = "red"> 理 查 德 ? 尼 克 松 </1i> 
19 <1i> 杰 拉 尔 德 ?福特 </1i> 
20 < li class = "red"> 罗 纳 德 ?里 根 </1i> 
ai <1i> 乔 治 ? 布 什 </1i> 

22 </ul> 

23 </div> 

24 </body> 

25 </html> 


代码 运行 结果 如 图 5-3-2 所 示 。 
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说 明 : 

上 述 例子 中 ,总 共有 4 个 <li> 标 签 ,它们 都 使 用 了 标签 选择 器 、 字 体 类 型 和 大 小 ,唯一 
不 同 的 是 字体 颜色 。 由 于 第 一 个 和 第 三 个 标签 使 用 了 类 选择 器 ,它们 的 字体 颜色 是 红色 ,与 
男 外 两 个 标签 进行 区 分 。 

定义 类 选择 器 的 好 处 是 任何 标签 都 可 以 应 用 该 类 样式 ,从 而 实现 样式 的 共享 和 代码 的 
复 用 。 需 要 注意 ,样式 是 释 加 和 继承 的 。< li > 标签 选择 器 先 规 定 了 页 面 内 所 有 的 列表 选项 
的 字体 颜色 、 大 小 和 类 型 ,然后 第 一 个 和 第 三 个 标签 还 应 用 了 red 类 样式 ,产生 了 样式 的 悉 
加 ,CSS 规定 后 定义 的 样式 覆盖 前 面 定义 的 样式 ,所 以 颜色 以 最 后 定义 的 为 主 , 即 应 用 了 类 
选择 器 里 面 的 样式 ,字体 变 为 红色 。 


5.3.3 ID 选择 器 


ID 属性 类 似 于 我 们 的 身份 证 ,ID 属性 作为 HTML 元 素 的 唯一 标识 , W3C 已 将 ID 属 
性 定 为 HTML 的 标准 属性 。HTML 属性 ID 的 特别 之 处 在 于 ,在 同一 HTML 文档 中 不 能 
有 两 个 具有 相同 ID 值 的 元 素 。 文 档 中 的 每 个 ID 值 都 必须 是 唯一 的 。 对 应 的 ID 选择 器 一 
般 用 于 修饰 对 应 ID 标识 HTML 元 素 内 容 , 实 际 应 用 中 常 和 < div > 标签 配合 使 用 ,表示 修饰 
对 应 ID 标识 的 某 个 div 区 块 ,其 使 用 步骤 如 下 : 

(1) 使 用 ID 属性 标识 被 修饰 的 页 面 元 素 。 例 如 对 应 的 div 块 ,<div id= "ID 标识 名 ">。 

(2) 定义 相应 的 ID 选择 器 样式 ,基本 语法 如 下 : 

#ID 标 识 名 { 

属性 名 1: 值 1; 
属性 名 2: 值 2; 

j: 

注意 : 

定义 ID 选择 器 时 ,是 以 一 个 井 号 (# ) 开 头 , 给 HTML 标签 设置 ID 属性 时 则 不 需要 。 
ID 名 可 以 自 定义 ,但 是 必须 符合 命名 标识 符 的 规范 ,不 能 以 数字 开头 。 

可 以 看 出 ,我 们 是 给 某 个 特定 的 标签 定义 一 个 全 页 面 唯一 的 ID 标识 名 ,然后 用 ID 选择 
器 给 这 个 特定 的 标签 来 定义 样式 ,所 以 ID 选择 器 是 修饰 某 个 指定 的 页 面 元 素 或 区 块 , 与 类 
选择 器 刚好 相反 ,类 选择 器 是 定义 一 种 样式 ,然后 让 多 个 HTML 元 素 所 共享 。 

例如 ,修改 实例 5-3-2, 如 图 5-3-3 所 示 ,将 整个 列表 项 看 成 一 个 带 有 ID 标识 的 div 块 ， 
现在 希望 只 对 该 div 块 进行 字体 、 宽 度 .背景 色 的 修饰 , 则 实现 思路 如 下 : 

(1) 将 所 有 的 列表 项 内 容 放 到 一 个 div 区 块 内 ,并 设置 它 唯一 的 ID 标识 名 。 

(2) 根据 上 述 ID 标识 ,定义 对 应 的 ID 选择 器 。 





图 5-3-3 ID 选择 器 示例 
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对 应 的 代码 如 下 。 

例 5-3-3 选择 器 示例 

1 <html> 

2 <head> 

3 <title> ID 选择 器 </title> 

4 < style type = "text/css"> 

5 # menu( 

6 font - size:20px; 

T font - family: Rk; 

8 width:200px; 

9 background: # ccc; 

10 } 

11 </style> 

12 </head> 

13 <body> 

14 <div id= "menu"> 

15 <ul> 

16 < 1i> 理 查 德 . 尼 克 松 </1i> 
17 <1i> 杰 拉 尔 德 福特 </1i> 
18 <1i> 罗 纳 德 :里 根 </1i> 
19 <1i> 乔 治 :布什 </1i> 
20 </ul> 

21 </div> 

22 </body> 

23 </html> 

说 明 : 


我 们 用 了 一 个 < div > 标签 把 所 有 的 < li > 标签 给 包 庄 了 起 来 ,然后 给 这 个 < div > 标签 设 
置 了 一 个 唯一 的 ID 属性 menu, 之 后 定义 ID 选择 器 ,声明 样式 ,包括 了 字体 大 小 、 类 型 ,这 
个 < div > 的 宽度 和 背景 色 。 


5.3.4 伪 类 选择 器 


前 面 学 到 的 属性 也 可 以 应 用 到 链接 上 (如 修改 颜色 字体、 添加 下 画 线 等 )。 但 不 同 的 
是 ,CSS 允许 根据 链接 是 未 访问 的 ` 已 访问 的 、 活 动 的 .是 否 有 鼠标 悬 停 等 分 别 定义 不 同 的 
属性 。 这 样 , 便 可 为 网 站 增添 奇特 而 有 用 的 效果 。 需 要 通过 伪 类 (pseudo-class) 来 控制 这 些 


效果 。 





伪 类 (pseudo-class) 令 用 户 可 以 在 为 HTML 元 素 定 义 CSS 属性 时 将 条 件 和 事件 考虑 
在 内 。 我 们 来 看 一 个 例子 。 正 如 我 们 所 知道 的 ,在 HTML 里 ,链接 是 通过 a 元 素来 定义 的 。 


因此 ,在 CSS H 


3 al 
2 color: 
< 


有 ,可 以 将 a 作为 一 个 选择 器 (selector) 。 





blue; 


一 个 链接 可 以 有 不 同 的 状态 。 例 如 , 它 可 以 是 已 访问 过 的 ,也 可 以 是 未 访问 过 的 。 可 以 
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通过 伪 类 分 别 为 访问 过 的 链接 和 未 访问 过 的 链接 设置 不 同 的 样式 。 


为 未 访问 过 的 链接 和 已 访问 过 的 链接 分 别 使 用 伪 类 a:link 和 a:visited。 活 动 的 链接 对 


应 的 伪 类 为 a:active, 有 鼠标 悬 停 的 链接 对 应 的 伪 类 为 a:hover。 


下 面 逐个 解释 这 4 个 伪 类 ,并 给 出 示例 。 
1. 擅 类 :link 用 于 浏览 者 从 未 访问 过 的 链接 
在 下 面 的 示例 代码 中 ,我 们 将 未 访问 过 的 链接 设 为 蓝 色 ,效果 如 图 5-3-4 所 示 。 


1 a:link ( 


ea- 


六 a 
Oe rm cremen — >| | 





图 5-3-4 未 访问 过 的 链接 为 蓝 色 


2. 伪 类 :visited 用 于 浏览 者 已 访问 过 的 链接 
例如 ,下 面 的 代码 将 已 访问 过 的 链接 设 为 红色 ,效果 如 图 5-3-5 所 示 o 
1 a:visited { 


2 color: red; 
3 


cj 局 


7 AS 
Te remme o- ox] Bomans -| 


rs 





图 5-3-5 访问 过 后 的 链接 为 红色 
3. 伪 类 :active 用 于 活动 的 链接 ( 即 获得 当前 焦点 的 链接 ) 
下 例 将 活动 的 链接 设 为 具有 黄色 背景 ,效果 如 图 5-3-6 所 示 。 


1 a:active { 
2 background- color: #FFFF00; 
3 


mm =-= 83 


DO exemmann |] 





图 5-3-6 ”当前 链接 为 焦点 时 颜色 为 黄色 
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4. 伪 类 :hover 用 于 有 鼠标 是 停 的 链接 
这 能 制造 出 有 趣 的 效果 。 例 如 ,如 果 要 当 鼠 标 光标 移 到 链接 上 时 将 链接 显示 为 杰 色 斜 
体 , 那 么 CSS 可 以 这 样 写 : 


T 
2 color: orange; 

3 font- style: italic; 
an 


效果 如 图 5-3-7 所 示 。 





图 5-3-7 ”鼠标 停留 在 链接 上 显示 为 橙色 斜体 
为 链接 设置 悬 停 效 果 十 分 流行 。 所 以 ,我们 再 看 一 个 :hover 伪 类 的 例子 。 





1 a:hover { 

2 letter - spacing: 10px; / * 字体 间距 10px x / 
3 font - weight:bold; / * 字体 加 粗 * / 

4 color:orange; / x 字体 颜色 橙色 * / 
Š background — color: yellow; /* 背景 颜色 黄色 * / 
6 ) 


效果 如 图 5-3-8 所 示 。 


= [Be es [es] | 


5-3-8 ”鼠标 停留 在 链接 上 效果 图 





注意 : 

在 CSS 定义 中 : 

(1) a:hover 必须 位 于 a:link 和 a:visited 之 后 ,这 样 才能 生效 。 

(2) a:active 必须 位 于 a:hover 之 后 ,这 样 才能 生效 。 

于 是 得 四 者 顺序 : 

a:link— a:visited——> a:hover 一 一 一 > a:active。 

CSS 伪 类 除了 之 前 介绍 的 4 种 伪 类 之 外 ,还 有 其 他 的 伪 类 ,但 是 因为 浏览 器 支持 不 够 完 
善 ,应 用 较 少 ,这 里 就 不 做 介绍 了 。 
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5.3.5 伪 元 素 选择 器 


伪 元 素 选择 器 用 于 其 他 选择 器 指定 适用 范围 内 的 元 素 特定 部 分 指定 样式 。 一 般 应 用 于 
文本 块 的 首 行 或 文本 块 的 首 字 字符 。 
例 5-3-4 未 访问 过 的 链接 为 蓝 色 示例 


<html> 
<head> 
<title> 伪 元 素 选 择 器 </title> 
< style type = "text/css"> 
pf font- size:15px; } 
Pp:first— line{font — size:25px; color:red} 
hl{font — size:18pt;color:blue} 
hl:first — letter{font — size:25pt;color:yellow;} 
9 </style> 
10 </head> 
11 <body> 
12 ”<p> 这 是 一 个 段落 ,第 一 行 的 字体 比 其 他 行 要 大 ,并 且 颜 色 也 不 一 样 。 这 是 一 个 段落 ,第 一 行 
13 ”的 字体 比 其 他 行 要 大 ,并 且 颜 色 也 不 一 样 。 这 是 一 个 段落 ,第 一 行 的 字体 比 其 他 行 要 大 ,并且 颜 
14 色 也 不 一 样 。 这 是 一 个 段落 ,第 一 行 的 字体 比 其 他 行 要 大 , 并且 颜色 也 不 一 样 。</p> 
15 ”<hl > 这 是 一 级 标题 ,第 一 个 字符 有 没有 不 同 ?</hl > 


woumwmb 


k-o- 


mrw r 
一 个 段落 ， 第 一 行 的 字体 比 其 他 行 要 大 ， 并 且 颜 色 j 


E TH. 这 是 一 个 段落 ,第 一 行 的 字体 比 其 他 行 要 大 ， 并 且 额 色 也 不 一 样 。 这 是 一 个 段落 ， 
第 一 行 的 字体 比 其 他 行 要 大 ， 并 且 额 色 也 不 一 样 。 这 是 一 个 段落 ,第 一 和 由 全 习 放 扣 人 
大 ， 并 且 颜 色 也 不 一 样 。 


是 一 级 标题 ， 第 一 个 字符 有 没有 不 同 ? 





图 5-3-9 伪 元 素 选 择 器 效果 


注意 : 
样式 表 中 有 两 条 伪 元 素 选择 器 的 样式 规则 声明 ,p:first-line 设置 了 页 面 中 所 有 段落 的 
第 一 行 的 样式 ,而 hl :first-letter 则 设置 了 页 面 中 所 有 < hl > 标签 中 首 个 字符 的 样式 。 


5.3.6 上下文 选择 器 


上 下 文选 择 器 就 是 通过 依据 元 素 在 其 位 置 的 上 下 文 关系 来 定义 样式 ,以 达到 使 标记 更 
加 简洁 的 目的 。 在 CSS1 中 ,通过 这 种 方式 来 应 用 规则 的 选择 器 称 为 上 下 文选 择 器 
(contextual selectors) ,这 是 由 于 它们 依赖 于 上 下 文 关系 来 应 用 或 避免 某 项 规则 。 在 CSS2 
中 ,它们 称 为 派生 选择 器 ,但 是 无 论 如 何 称呼 它们 ,它们 的 作用 都 是 相同 的 。 
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例如 ,希望 列表 中 的 strong 元 素 变 为 斜体 字 ,而 不 是 通常 的 粗 体 字 ,可 以 这 样 定义 一 个 
派生 选择 器 : 


li strong { 
font- style: italic; 
font- weight: normal; 
H 


AODP 


请 注意 标记 为 <strong> 的 蓝 色 代码 的 上 下 文 关系 : 


<p> 
< strong > 我 不 是 斜体 字 , 因为 我 不 在 列表 当中 , 这 个 规则 对 我 不 起 作用 </strong> 
</p> 


<ol> 
<1i>< strong > 我 是 斜体 字 。 这 是 因为 strong 元 素 位 于 li 元 素 内 。</strong></1i> 
<1i> 我 是 正常 的 字体 。</1i> 

</ol > 


oonan wnNne 


在 上 面 的 例子 中 ,只 有 1i 元 素 中 的 strong 元 素 的 样式 为 斜体 字 ,无 须 为 strong Jú # E 
义 特别 的 class 或 id, 代 码 更 加 简洁 。 


<html> 
<head> 
< title> 后 代 选 择 器 </title> 
< style type = "text/css"> 
hl em (color:red;) 
</style> 
</head> 
<body> 
< hl > 今天 < em > 天气 </em > 不 错 哦 </hl > 


oonan wne 


= = 
=° 
"ë 


代码 运行 结果 如 图 5-3-10 所 示 o 


es een" x 


(Om -cxjerm — “x |G 213 
今天 无 气 不 错 哦 





图 5-3-10 后 代 选 择 器 效果 
注意 : 


hl 和 em 之 间 有 一 个 空格 。 那 么 这 一 条 CSS 代码 就 会 运用 于 包含 在 < hl ></h1 > 标签 
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内 的 所 有 < em > 元 素 。 
关于 后 代 选 择 器 ,很 重要 的 一 点 是 第 一 个 参数 和 第 二 个 参数 之 间 的 代数 是 可 以 无 限 的 。 


5.3.7 和 群 组 选择 器 


有 时 候 ,多 个 样式 规则 的 定义 相同 ,但 选择 器 名 称 不同 。 可 以 将 这 些 样式 规则 合并 成 为 
一 个 样式 规则 ,选择 器 名 称 之 间 使 用 逗号 来 分 隔 。 


1 h2, p (color:red;) 


将 h2 和 选择 器 放 在 规则 左边 ,然后 用 逗号 分 隔 , 就 定义 了 一 个 规则 。 其 右边 的 样式 
(color: red; ) 将 应 用 到 这 两 个 选择 器 所 引用 的 元 素 。 豆 号 告诉 浏览 器 ,规则 中 包含 两 个 不 同 
的 选择 器 。 可 以 将 任意 多 个 选择 器 分 组 在 一 起 ,对 此 没有 任何 限制 。 

通过 分 组 ,创作 者 可 以 将 某 些 类 型 的 样式 “压缩 "在 一 起 ,这 样 就 可 以 得 到 更 简洁 的 样 
式 表 。 

例如 ,如 果 想 把 很 多 元 素 显示 为 蓝 色 ,可 以 使 用 类 似 如 下 的 规则 : 


1 hl, table,p, h6 {color:blue;} 


例 5-3-5 ”访问 过 后 的 链接 为 红色 示例 


<html> 
<head> 
< title> 群 组 选择 器 </title> 
< style type = "text/css"> 
hl,h2,h3(color:red;text - align:center; } 
</style> 
</head> 
< body> 
< hl > 一 级 标题 </hl > 
< h2 > 二 级 标题 </h2 > 
< h3 > 三 级 标题 </h3 > 
</body> 
</html> 


onou a wne 


PR PP 
UNEO 


代码 运行 结果 如 图 5-3-11 所 示 。 


i-—- EN sag 


Ow  P-cx|ememm | | 





图 5-3-11 和 群 组 选择 器 效果 
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5.4 如 何 应 用 样式 


之 前 所 用 到 的 范例 中 ,我 们 都 是 在 同文 件 的 < head > 标签 中 加 入 CSS 代码 ,在 这 里 声明 
的 样式 规则 称 为 内 部 样式 表 , 或 者 叫 内 散 样 式 表 , 它 们 将 对 整个 页 面 全 局 有 效 , 但 这 并 不 是 
唯一 的 方法 。 在 CSS 中 ,应 用 样式 有 3 种 方式 : 内 部 样式 表 、 外 部 样式 表 以 及 行内 样式 。 下 
面 依次 学 习 各 种 应 用 样式 的 优 缺 点 以 及 应 用 场景 。 


5.4.1 三 种 样式 表 写 法 

1. 内 部 样式 表 

正如 之 前 的 实例 一 样 ,我 们 把 CSS 代码 写 在 < head > 中 的 < style > 标签 内 ,与 HTML 内 
容 位 于 同一 文件 ,这 就 是 内 部 样式 表 。 这 种 方式 方便 在 同 页 面 中 修改 样式 ,但 不 利于 在 多 页 
面 间 共 享 复 用 代码 及 维护 ,对 内 容 和 样式 分 离 也 不 够 彻底 。 实 际 开发 中 ,会 在 页 面 开发 结束 
后 ,将 这 些 样式 代码 剪 切 到 单独 的 CSS 文件 中 ,将 样式 和 内 容 进行 彻底 的 分 离 , 即 我 们 下 面 
介绍 的 外 部 样式 表 。 

2. 外 部 样式 表 

把 CSS 代码 写 到 单独 的 CSS 文件 中 ,需要 用 到 时 在 < head > 中 通过 < link > 标签 来 引 
用 ,这 就 是 外 部 样式 表 , 它 的 好 处 是 将 样式 和 内 容 进行 彻底 的 分 离 ,方便 网 站 的 维护 和 更 新 。 
其 语法 如 下 : 


1 <link rel= "stylesheet" type = "text/css" href ="css 文 件 的 地 址 " /> 


接 下 来 看 看 如 何 使 用 外 部 样式 表 。 

(1) 新 建 一 个 文本 文档 ,另存 到 style 目录 下 ,修改 文件 名 和 后 级 名 ,例如 "my. css"。 

(2) 把 原来 要 写 在 < style > 内 的 样式 代码 都 写 到 my. css 文件 中 。 

(3) 在 < head > 标签 中 加 入 < link > 标签 语句 ,并 把 href 文件 的 地 址 属性 设置 为 第 一 步 
另存 为 的 “style/my. css”, B: 


1 <link rel= "stylesheet" type = "text/css" href = "style/my. css" /> 
下 面 通 过 一 个 示例 来 演示 外 部 样式 表 。 


1 <html> 

2 <title> 外 部 样式 表 </title> 

< <head> 

4 < link rel= "stylesheet" type = "text/css" href = "style/my. css"> 
5 </head> 

6 <body> 

7 <hl > hl 级 别 的 标题 : 红色 </hl > 

8 <h2 > h2 级 别 的 标题 : 绿色 </h2 > 

9 <h3 > h3 级 别 的 标题 : 蓝 色 </h3> 
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10 <p> 这 是 一 个 段落 : 灰色 </p> 
11 </body> 
12 </html> 


CSS 样式 ,my. css: 


hl {color:red} 
h2 {color:green} 
h3 {color:blue} 
p {color:gray} 


RUNE 


代码 运行 结果 如 图 5-4-1 所 示 。 


= EOE x 


Om orejones | E 
hl 级 别 的 标题 : 红色 


h2 级 别 的 标题 : 绿色 
h3 级 别 的 标题 : 蓝 色 


这 是 一 个 段落 ， 灰色 





图 5-4-1 外 部 样式 表 效 果 


可 以 看 到 ,外 部 样式 表 的 效果 与 内 部 样式 表 的 效果 是 完全 一 样 的 ,但 是 内 容 和 样式 分 离 
得 更 彻底 ,外 部 样式 表 可 以 用 在 多 个 页 面 上 ,实现 了 代码 复 用 。 当 界面 需要 变化 时 ,只 需要 
修改 CSS 文件 中 的 样式 代码 , 即 可 实现 网 页 的 维护 与 更 新 。 

3. 内 联 样式 

某 些 情况 下 ,需要 对 某 个 特定 标签 进行 单独 设置 ,最 直观 的 方法 就 是 在 标签 的 属性 内 进 
行 直 接 设 置 。 例 如 : 


1 <a href = "http://www. baidu. com" style = "text— decoration:none" target = "_blank"> 
2 jJ —4- 44 F m£ hE 
3 </a> 


由 于 要 将 表现 和 内 容 混 杂 在 一 起 ,内 联 样式 会 损失 掉 样式 表 的 许多 优势 ,所 以 在 进行 项 
目 开发 时 ,一 般 不 太 建议 使 用 。 


5.4.2 CSS 样式 表 的 优先 级 


我 们 知道 ,CSS 被 称 为 “ 层 琶 样式 表 ”, 对 于 页 面 中 的 某 个 元 素 , 它 允许 同时 应 用 多 类 样 
式 , 即 样式 的 全 加 ,页 面 元 素 最 终 的 样式 即 为 多 样式 的 又 加 效果 。 但 这 存在 一 个 问题 á |F] 
时 应 用 以 上 3 种 样式 表 时 ,页 面 元 素 将 继承 这 些 样 式 , 但 是 如 果 样 式 之 间 有 冲突 ,应 该 继承 
哪 种 样式 呢 ? 即 存在 优先 级 的 问题 , 同 理 , 从 选择 器 角度 , 当 某 个 元 素 同时 应 用 了 标签 选择 
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器 ID 选择 器 、 类 选择 器 等 所 定义 的 样式 时 ,也 存在 着 优先 级 的 问题 。CSS 中 规定 的 优先 级 
规则 为 : 


避 内 联 样式 表 二 内 部 样式 表 二 外 部 样式 表 

Z= ID 选择 器 二 类 选择 器 二 标签 选择 器 

“内 联 样式 表 二 内 部 样式 表 二 外 部 样式 表 ” 即 为 就 近 原 则 。 

但 是 有 个 例外 的 情况 ,就 是 如 果 外 部 样式 放 在 内 部 样式 的 后 面 , 则 外 部 样式 将 覆盖 内 部 


样式 。 


例 5-4-1 外 部 样式 覆盖 内 部 样式 


1 <head> 
< style type = "text/css"> 

3 /* 内 部 样式 * / 

4 h3{color:green;} 

5 </style> 

6 <! -- 外 部 样式 style.css --> 

7 < link rel = "stylesheet" type = "text/css" href = "style.css"/> 
8 <! — 设置 : h3{color:blue;} --> 

9 </head> 

10 <body> 

11 < h3 > 测试 !</h3 > 

12 </body> 


总 结 


<= f JJ CSS 层 琶 样式 表 可 以 对 页 面 元 素 外 观 风格 进行 全 面 精确 的 控制 ,实现 网 页 的 内 
容 与 结构 的 分 离 , 利 于 团队 开发 ,提高 开发 效率 等。 

< CSS 样式 规则 采用 选择 器 、 必 性、 属性 值 进行 描述 。 

二 选择 器 包含 了 标签 选择 器 类 选择 器 .ID 选择 器 、 伪 类 选择 器 、 伪 元 素 选择 器 .上 下 文 
选择 器 、 群 组 选择 器 等 。 

二 样式 代码 可 以 防止 在 当前 网 页 的 头 部 ,也 可 以 防止 在 网 页 之 外 的 独立 的 样式 文件 中 ， 
在 网 页 的 < head > 标签 内 进行 引入 ,也 可 以 直接 写 在 标签 内 的 style 属性 中 。 

二 选择 器 和 样式 可 以 继承 和 蚕 加 ,但 是 也 存在 着 优先 级 。 


课 后 习题 


(1) 在 HTML 页 面 中 显示 一 首 古诗 词 , 在 其 中 编写 CSS 样式 代码 。 所 有 的 字体 均 加 


粗 显 示 ,标题 行 背景 颜色 为 "yellow”, 如 下 图 所 示 。 
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静夜 思 
窗 前 明月 光 ， 
MEER. 
FAAA, 
低头 因 故乡 。 


(2) 在 HTML 页 面 中 显示 两 行 撕 裂 的 表格 ,在 其 中 编写 CSS 样式 代码 。“ 诺 基 亚 ”“ 摩 
托 罗拉 ”联想 “戴尔 ” 均 为 超 链 接 , 并 未 使 用 的 超 链接 显示 蓝 色 ,没有 下 面 线 ; 鼠标 巧 停 时 ， 
显示 橙色 ,有 下 画 线 ; 鼠标 点 下 时 ,显示 绿色 ,没有 下 画 线 ; 单 击 以 后 ,显示 红色 ,有 上 画 线 ， 


如 下 图 所 示 。 
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D 
名 了 解 并 掌握 背景 的 常用 样式 属性 。 
名 了 解 并 掌握 文本 的 常用 样式 属性 。 
名 了 和 解 并 掌 担 字体 的 常用 样式 属性 。 
名 了 解 并 掌握 边框 的 常用 样式 属性 。 
名 了 解 并 掌握 列表 相关 的 常用 样式 属性 。 
名 了 和 解 并 掌握 其 他 常用 样式 属性 。 


ETT 
请 在 预习 时 学 会 下 列 单词 的 含义 和 发 音 , 并 填写 在 横 线 处 。 


. repeat: 


. fixed; 








. transparent: 





. uppercase: 








. underline; 





. medium; 





. alpha; 





1 
2 
3 
4 
5. lowercase: 
6 
rd 
8 
9 


. disc: 





10. square: 
11. decimal; 


12. outside: 











13. visibility: 





14. cursor: 
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* 


网 页 元 素 可 以 修饰 的 样式 属性 很 多 ,常用 的 样式 分 为 文本 及 字体 .背景 列表 、 边 框 等 几 
个 方面 ,将 逐一 进行 介绍 。 








6.1 颜色 与 背景 


在 这 一 节 , 将 学 习 如 何在 网 站 上 应 用 颜色 与 背景 。 利 用 与 背景 相关 的 属性 ,可 以 设置 一 
个 区 域 的 背景 颜色 .背景 图 像 , 还 能 精确 地 控制 背景 出 现 的 位 置 . 平 铺 方向 等 。 我 们 将 对 这 
些 常 用 的 颜色 背景 属性 进行 详解 : 

= color 

æ background-color 

æ background-image 

æ background-repeat 

æ background-attachment 

æ background-position 

æ background 

1. 前 景色 : color 

例如 ,假设 要 让 页 面 中 的 所 有 < hl > 标签 中 内 容 都 显示 为 深 红色 ,那么 可 以 用 下 面 的 代 
码 来 实现 把 hl 元 素 的 前 景色 设 为 红色 。 


Lh 
z color: # ff0000; 
3 ) 


颜色 值 可 以 用 十 六 进 制 表示 (如 上 例 中 的 # ffo000), 也 可 以 用 颜色 名 称 ( 如 ”red”) 或 
RGB 值 (如 rgb(255,0,0)) 表 示 。 

2. 背景 色 : background-color 

background-color 用 于 指定 元 素 的 背景 色 。 

因为 body 元 素 包含 了 HTML 文档 的 所 有 内 容 , 所 以 ,如 果 要 改变 整个 页 面 的 背景 色 ， 
那么 为 body 元 素 应 用 background-color 属性 即 可 。 

也 可 以 为 其 他 包含 标题 或 文本 的 元 素 单 独 应 用 背景 色 。 在 下 例 中 ,为 body 和 hl 元 素 
分 别 应 用 了 不 同 的 背景 色 。 


body { 
background — color: #FFCC66; 
) 
hl ( 
color: #990000; 
background — color: # FC9804; 


souna wne 
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代码 运行 结果 如 图 6-1-1 所 示 。 


m= x 


JEn pox arin | | ya 





图 6-1-1 背景 色 与 前 景色 


注意 : 

背景 图 像 优 先 于 背景 颜色 ,background-color 属性 设置 为 transparent 表示 透明 。 

3. 背景 图 像 : background-image 

CSS 属性 background-image 用 于 设置 背景 图 像 。 

在 下 面 的 示例 中 ,使 用 了 一 条 花 的 图 像 作为 背景 。 可 以 将 该 图 片 下 载 下 来 (方法 为 : 鼠 
标 右 击 该 图 片 ,然后 选择 “图片 另存 为 ") ,以便 在 自己 的 计算 机 上 使 用 。 当 然 , 也 可 以 选用 其 
他 觉得 满意 的 图 片 。 

如 果 要 把 这 张 图 片 作为 网 页 的 背景 图 像 ,只 要 在 body 元 素 上 应 用 background-image 
属性 ,然后 给 出 花 的 图 片 的 存放 位 置 即 可 。 

例 6-1-1 背景 色 与 前 景色 


<html> 
<head> 
<title> 背 景 图 片 </title> 
< style type = "text/css"> 
body ( 
background - color: # FFCC66; 
background - image: url("flower. png"); 


o mí Oo nn 8 VNB 


代码 运行 结果 如 图 6-1-2 所 示 。 
注意 : 
我 们 指定 图 片 存 放 位 置 的 方式 : url("flower. png")。 这 表明 图 片 文件 和 样式 表 存 放 在 
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图 6-1-2 背景 图 片 





同一 目录 下 。 也 可 以 引用 存放 在 其 他 目录 的 图 片 ,只 需 给 出 存放 路 径 即 可 (如 url("../ 
images/flower. png")); 此 外 ,其 至 可 以 通过 给 出 图 片 的 地 址 来 引用 因特网 (Internet) 上 的 
图 片 (如 url("http://www. html. net/"))。 
4. 平 铺 背 景 图 像 : background-repeat 
有 没有 发 现在 上 例 中 那个 花 条 图 片 在 横向 和 纵向 都 被 平 铺 了 ? CSS 属性 background- 
repeat 就 是 用 于 控制 平 铺 的 。 
表 6-1-1 概括 了 background-repeat 的 4 种 不 同 取 值 。 


























表 6-1-1 background-repeat 的 4 种 不 同 取 值 
值 描 æ 应 用 场景 

background-repeat:repeat-x 横向 平 铺 细 长 小 图 实现 渐变 效果 
background-repeat:repeaty 纵向 平 铺 小 图 背景 实现 特殊 边框 
background-repeat: repeat 横向 和 纵向 都 平 铺 ,不 填 时 的 默认 值 | 小 方块 图 平 铺 构建 整体 背景 
background-repeat:no-repeat 不 平 铺 大 图 做 背景 或 使 用 偏 移 量 控制 

所 以 ,为 了 让 图 片 不 平 铺 ,应 该 加 一 句 代码 : 

1 body ( 

2 background- color: # FFCC66; 

3 background — image: ur1("flower. png"); 

4 background — repeat :no — repeat; 

S 


5. 固定 背景 图 像 : background-attachment 
CSS 属性 background-attachment 用 于 指定 背景 图 像 是 固定 在 屏幕 上 的 ,还 是 随 着 它 所 
在 的 元 素 而 滚动 的 。 一 个 固定 的 背景 图 像 不 会 随 着 用 户 滚动 页 面 而 发 生 滚动 ( 它 是 固定 在 
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屏幕 上 的 ) ,而 一 个 非 固定 的 背景 图 像 会 随 着 页 面 的 滚动 而 滚动 。 
K 6-1-2 概括 了 background-attachment 的 两 种 不 同 取 值 ,可 以 单 击 示例 查看 二 者 的 
区 别 。 





表 6-1-2 background-attachment 的 两 种 不 同 取 值 
值 描 述 
图 像 会 跟随 页 面 滚动 一 一 非 固定 的 
图 像 是 固定 在 屏幕 上 的 








background-attachment: scroll 





attachment:fixed 








例如 ,下 面 的 代码 将 背景 图 像 固定 在 屏幕 上 。 


1 body ( 

2 background — color: #FFCC66; 

3 background — image: url("flower. png"); 
4 background - repeat: no — repeat; 

3 background - attachment: fixed; 
6 

T 

8 

9 


color: #990000; 
background — color: # FC9804; 
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6. 放置 背景 图 像 : background-position 
背景 图 像 默 认 从 被 修饰 元 素 的 左上 角 开 始 显示 图 像 ,但 是 也 可 以 使 用 background- 
position 属性 设置 背景 图 显示 的 位 置 ,将 背景 图 像 摆 放 在 屏幕 上 觉得 满意 的 地 方 , 即 背 景 图 
出 现 一 定 的 偏 移 量 。 如 表 6-1-3 所 示 , 它 可 以 使 用 具体 的 数值 .百分比 .关键 词 3 种 方式 表 
示 水 平和 垂直 方向 的 偏 移 量 。 
X 6-1-3 ” background-position 属性 设置 
背景 图 出 现 的 初始 位 置 描述 示 A 











使 用 具体 的 像素 值 表示 | 0px 0px( 默 认 , 从 左上 角 开始 显示 图 片 , 无 偏 移 
背景 出 现 的 位 置 ,第 一 | 效果 ) 

Xpos Ypos pa š 站 
个 数值 表示 水 平 位 置 ,| 20px 一 50px( 图 片 向 右 移 动 20px, 向 上 移动 
第 二 个 则 表示 垂直 位 置 | 50px) 

x% Y% 使 用 百分比 表示 背景 出 | 2096 50y( 水 平方 向 偏 移 20% ,垂直 方向 居中 ) 
现 的 位 置 
使 用 关键 词 决定 背景 出 | 使 用 水 平和 垂直 方向 的 关键 词 进行 自由 组 合 ,如 


现 的 位 置 ,有 left, right, 
top、bottom 和 center, 可 


自由 组 合 


X 和 YY 方向 关键 词 








果 不 写 , 默 认 是 center 居中 
left top 表示 左上 角 
right bottom 表示 右 下 角 





方向 和 于 


背景 图 默认 以 左上 角 作 为 原点 坐标 , 即 (0px,0px) ,以 此 为 基础 设置 背景 图 出 现 的 水 平 





EE 直方 向 的 坐标 。 如 某 个 方向 的 坐标 为 正 , 即 正 偏 移 , 则 背景 图 向 右 或 向 下 偏 移 , 相 
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反 则 是 负 偏 移 , 背 景 图 向 左 或 向 上 偏 移 。 
在 下 例 中 ,改变 了 图 片 的 显示 位 置 : 


1 body ( 

2 background — color: # FFCC66; 

3 background — image: url("flower. png"); 
4 background- repeat: no — repeat; 

5 background — attachment: fixed; 

6 background — position:50px 80px; 

7 


网 站 开发 中 常见 的 应 用 是 利用 背景 坐标 偏 移 , 截 取 某 张 背景 图 片 中 一 部 分 的 内 容 。 为 
了 减少 客户 端 从 服务 器 下 载 端 下 载 图 片 的 次 数 , 提 高 服务 器 的 性 能 ,比较 流行 的 做 法 是 将 多 
张 图 片 合成 一 张大 图 ,然后 再 利用 background-position 属性 截取 里 面 需要 用 到 的 各 个 小 
图 ,将 小 图 显示 在 页 面 中 。 具 体 效果 如 图 6-1-3 所 示 。 

从 一 张 背 景 图 中 截取 各 个 小 图 标 , 类 似 于 我 们 用 放大 镜 到 六 @ 恒 ? 
看 地 图 一 样 ,通过 水 平和 垂直 方向 来 移动 放大 镜 即 可 获取 到 AA Q 
需要 的 位 置 。 

7. 简写 : background 

CSS 属性 background 是 上 述 所 有 与 背景 有 关 的 属性 的 和 C ( ( (  / 
缩写 用 法 。 使 用 background 属性 可 以 减少 属性 的 数目 , 因 图 6-1-3 ”拼合 而 成 的 大 图 
此 令 样 式 表 更 简短 易 读 。 

例如 说 下 面 5 行 代码 : 


background — color: # FFCC66; 
background — image: url("flower. png") ; 
background - repeat: no- repeat; 
background — attachment: fixed; 
background - position: right bottom; 


@ é Ó ` P> 


如 果 使 用 background 属性 ,实现 同样 的 效果 只 需 一 行 代码 即 可 解决 : 


1 background: #FFCC66 url("flower. png") no- repeat fixed right bottom; 
2 
各 个 值 应 按 下 列 次 序 来 写 : 


[background — color] | [background - image] | [background - repeat] | [background — attachment] | 
[background - position] 


如 果 省 略 某 个 属性 不 写 出 来 ,那么 将 自动 为 它 的 默认 值 。 例 如 ,如 果 去 掉 background- 


attachment 和 background-position: 


1 background: #FFCC66 url("flower. png") no- repeat; 
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这 两 个 未 指定 值 的 属性 将 被 设置 为 默认 值 : scroll 和 top left, 


6.2 文本 


文本 属性 用 于 定义 文本 的 外 观 .可 以 用 来 设置 文本 块 的 文字 颜色 、 字 符 间 距 、 对 齐 方式 、 
文字 装饰 , 缩 进 、 大 小 写 转换 等 。 常 用 的 文本 属性 如 下 : 

æ text-indent 

æ text-align 

æ text-decoration 

æ letter-spacing 

æ text-transform 

1. 文本 缩 进 : text-indent 

CSS 属性 textrindent 用 于 为 段落 设置 首 行 缩 进 , 以 令 其 具有 美观 的 格式 。 在 下 例 中 ， 
为 采用 p 元 素 的 段落 应 用 了 30 像素 的 首 行 缩 进 。 


1 pÍ 
2 text- indent: 30px; 
3 


2. 文本 对 齐 : text-align 

CSS 属性 text-align 与 HTML 属性 align 的 功能 相同 。 该 属性 的 值 可 以 是 : left( 左 对 
齐 ) ,right( 右 对 齐 ) 或 者 center( 居 中 )。 除 了 上 面 3 种 选择 以 外 ,还 可 以 将 该 属性 的 值 设 为 
justify( 两 端 对 齐 ), 即 伸缩 行 中 的 文字 以 左右 靠 齐 。 报 刊 杂 志 经 常 采 用 这 种 布局 。 在 下 例 
中 ,标题 (th) 中 的 文字 被 设置 为 右 对 齐 ,而 表 中 数据 (td) 被 设置 为 居中 。 正 常 的 文本 段落 被 
设置 为 两 端 对 齐 。 


th{ 
text-align: right; 
) 
td { 
text - align: center; 
) 
pt 
text-align: justify; 


oon A Q vne 


i 


text-align 负责 文本 的 水 平 对 齐 方式 ,而 垂直 方向 的 对 齐 方式 由 vertical-align 来 设置 ， 
常用 的 取 值 如 表 6-2-1 所 示 。 
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* 
表 6-2-1 垂直 对 齐 方式 的 常用 取 值 
属 性 取 值 描 述 
baseline 默认 ,元 素 放 置 在 父 元 素 的 基线 上 
sub 垂直 对 齐 文本 的 下 标 
super 垂直 对 齐 文本 的 上 标 
las di top 把 元 素 的 顶端 与 行 中 最 高 元 素 的 顶端 对 齐 
op 把 元 素 的 顶端 与 父 元 素 字体 的 顶端 对 齐 
middle 把 此 元 素 放置 在 父 元 素 的 中 部 
bottom 把 元 素 的 顶端 与 行 中 最 低 的 元 素 的 顶端 对 齐 
text-bottom 把 元 素 的 底 端 与 父 元 素 字体 的 底 端 对 齐 
下 面 请 看 具体 的 范例 6-2-1. 
例 6-2-1 垂直 方向 对 齐 示例 
1 <html> 
2 <head> 
3 <title> 垂 直方 向 对 齐 </title> 
4 < style type = "text/css"> 
5 img. top {vertical - align:text - top) 
6 img. bottom {vertical ~ align: text - bottom} 
7 </style> 
8 </head> 
9 <body> 
10 <p> 
11 这 是 一 幅 < img class = "top" border = "0" src = "img. png" /> 位 于 段落 中 的 图 像 。 
12 </p> 
13 <p> 
14 这 是 一 幅 < img class = "bottom" border = "0" src = "img. png" /> 位 于 段落 中 的 图 像 。 





ET 
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立 于 段落 中 的 图 像 。 


这 是 一 幅 科 于 段落 中 的 图 像 。 


图 6-2-1 垂直 方向 对 齐 示例 


3. 文本 装饰 : text-decoration 
CSS 属性 text-decoration 令 我 们 可 以 为 文本 增添 不 同 的 “装饰 ”或 “效果 ”。 例 如 ,可 以 
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为 文本 增添 下 画 线 、 删 除 线 、 上 画 线 等 。 在 接 下 来 的 例子 中 ,为 hl 标题 增添 了 下 画 线 ,为 h2 
标题 增添 了 上 夯 线 ,为 h3 标题 增添 了 删除 线 。 


hl ( 
text — decoration: underline; 
} 
h2 ( 
text — decoration: overline; 
; 
h3 ( 
text — decoration: line- through; 
fi 


voon oua wne 


4. 字符 间距 : letter-spacing 

CSS 属性 letter-spacing 用 于 设置 文本 的 水 平 字 间距 。 可 以 把 期 望 的 字 间 距 宽度 作为 
这 个 属性 的 值 。 例 如 ,假如 希望 p 元 素 里 的 文本 段落 的 字 间 距 为 3 个 像素 ,而 hl 标题 的 字 
间距 为 6 个 像素 ,代码 可 以 这 样 写 : 


hl ( 

letter — spacing: 6px; 
} 

p ( 

letter — spacing: 3px; 
} 


ouas Ó Ñ > 


5. 文本 转换 : text-transform 

text-transform 用 于 控制 文本 的 大 小 写 。 无 论 字 母 本 来 的 大 小 写 ,可 以 通过 该 属性 令 其 
首 字母 大 写 (capitalize) ,全 部 大 写 (uppercase) 或 者 全 部 小 写 (lowercase) ,如 文本 中 的 Hello 
world。 具 体 取 值 见 表 6-2-2。 


表 6-2-2 text-transform 的 取 值 

















值 描 R 示 例 
text-transform; capitalize 每 个 单词 的 首 字母 转换 为 大 写 Hello World 
text-transform; uppercase 所 有 字母 都 转换 为 大 写 HELLO WORLD 
text-transform: lowercase 所 有 字母 都 转换 为 小 写 hello world 





来 举 个 例子 ,我 们 将 使 用 一 个 姓名 列表 。 所 有 姓名 都 用 < li >( 列 表 项 ) 标 签 来 标记 。 我 
们 希望 对 姓名 采用 首 字母 大 写 的 方式 ,而 对 标题 采用 全 部 大 写 的 方式 。 
查看 过 该 例 的 HTML 代码 后 会 发 现 ,在 HTML 代码 里 我 们 写 的 姓名 和 标题 全 部 都 是 


小 写 。 
buy 
2 text — transform: uppercase; 
3 ) 
4 lif 
5 text- transform: capitalize; 
6 } 
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6.3 字体 


使 用 与 字体 相关 的 CSS 属性 ,可 以 设置 文字 块 的 字体 或 字体 组 .字号 大 小 \ 行 间距 以 及 
加 粗 、 倾 斜 .小 型 大 写字 体 等 特殊 格式 。 我 们 还 会 考虑 如 何 解决 “网 站 所 选 的 字体 仅 当 访问 
者 的 PC 上 安装 有 该 字体 时 才 会 被 显示 ”这 一 难题 。 常 用 的 字体 样式 属性 如 下 : 

æ font-family 

æ font-style 

æ font-variant 

æ font-weight 

æ font-size 

æ line-height 

æ [ont 

1. 字体 族 : font-family 

字体 族 名 称 (就 是 我 们 通常 所 说 的 “字体 ”) 的 例子 包括 "Arial”Times NewRoman” “R 
体 “ 黑 体 ” 等 。 

用 法 如 下 : 


1 hl {font- family: "Times New Roman";} 


注意 我 们 为 "Times New Roman” 采 用 的 写法 : 因为 其 中 包含 空格 ,所 以 用 引号 将 它 括 
起 来 。 

2. 字体 样式 : font-style 

font-style 定义 所 选 字体 的 显示 样式 : normal( 正 常 ) ,italic( 斜 体 ) 或 oblique IRD. fE 
下 例 中 ,所 有 h2 标题 都 将 显示 为 斜体 。 

示例 : 


1 h2 {font- family: "Times New Roman"; font- style: italic;} 


3. 字体 变化 : font-variant 

font-variant 的 值 可 以 是 normal( 正 常 ) 或 small-caps( 小 体 大 写字 母 )。small-caps 字体 
是 一 种 以 小 尺寸 显示 的 大 写字 母 来 代替 小 写字 母 的 字体 。 不 太 明 白 ? 我 们 来 看 几 个 例子 : 
如 果 font-variant 属性 被 设置 为 small-caps, 而 没有 可 用 的 支持 小 体 大 写字 母 的 字体 ,那么 
浏览 器 多 半 会 将 文字 显示 为 正常 尺寸 (而 不 是 小 尺寸 ) 的 大 写字 母 。 

示例 : 

1 hl (font - variant: small- caps;} 

2 h2 {font— variant: normal;} 


4. 字体 浓淡 : font-weight 
font-weight 指定 字体 显示 的 浓淡 程度 。 其 值 可 以 是 normal( 正 常 ) 或 bold( 加 粗 )。 有 
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些 浏 览 器 甚至 支持 采用 100 一 900 的 数字 (以 百 为 单位 ) 来 衡量 字体 的 浓淡 。 
示例 : 


1 pi{font- family: arial, verdana, sans- serif;} 
2 td [font - family: arial, verdana, sans- serif; font- weight: bold; } 


5. 字体 大 小 : font-size 

字体 的 大 小 用 font-size 来 设置 。 

字体 大 小 可 通过 多 种 不 同 单位 (如 像素 或 百分比 等 ) 来 设置 。 本 节 将 关注 最 常用 和 最 合 
适 的 单位 。 例 如 : 

例 6-3-1 不 同 单位 的 字体 大 小 


<html> 
<head> 
<title> 字 体 大 小 </title> 
< style type = "text/css"> 
# p1( font — size: 30px;) 
# p2( font — size: 30pt;) 
# p3( font — size: 130 % ;) 
# p4( font — size: 3em;) 
</style> 
10 </head> 
11 <body> 
12 <p id= "pl"> 这 是 一 段 话 .</p> 
13 <p id= "p2"> 这 是 一 段 话 .</p> 
14 <p id= "p3"> 这 是 一 段 话 .</p> 
15 <p id= "p4"> 这 是 一 段 话 .</p> 
16 </body> 
17 </html> 


`° mío 3 aonan Q N hm 





6-3-1 不 同 单位 的 字体 大 小 
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上 面 4 种 单位 有 着 本 质 的 区 别 。“px” 和 “pt” 将 字体 设置 为 固定 大 小 ,而 “%” 和 “em” 允 
许 页 面 浏览 者 自行 调整 字体 的 显示 尺寸 。 有 些 页 面 浏览 者 可 能 是 残疾 者 \ 年 长 者 、 视 力 不 住 
者 ,或 者 他 所 使 用 的 计算 机 显示 屏 显 示 质 量 差 。 为 了 网 站 对 所 有 人 都 具有 良好 的 可 用 性 ,应 
采用 像 *%” 或 “em” 这 种 允许 用 户 调节 字体 显示 大 小 的 单位 。 

6. 行 高 : line-height 

用 来 设置 文本 块 的 行 高 即行 间距 ,可 以 使 用 px( 像 素 ) 或 者 百分比 来 取 值 。 

示例 : 








1 pi 

2 line- height:28px 
3 ) 

7. 简写 : [ont 


font 是 上 述 各 有 关 字 体 的 CSS 属性 的 缩写 用 法 。 
例如 下 面 4 行 应 用 于 Pp 元 素 的 代码 : 


Tapi 

2 font - style: italic; 
3 font - weight: bold; 
4 font - size: 30px; 

5 font- family: arial; 
6} 


如 果 用 font 属性 ,上 述 4 行 代码 可 简化 为 : 


1 pÍ 

2 font: italic bold 30px arial; 
3; 

注意 : 


font-family, font-size 等 是 font 的 子 属性 ,所 以 一 般 利 用 font 属性 一 次 设置 字体 的 所 有 
样式 属性 。 但 是 需要 注意 几 种 格式 的 顺序 依次 为 : font-style | font-variant | font-weight | 


font-size | font-family, 


6.4 边框 


边框 (border) 可 以 有 多 种 用 途 ,例如 作为 装饰 元 素 或 作为 划分 两 物 的 分 界线 。 在 设置 
边框 方面 ,CSS 提供 了 很 多 选择 。 常 用 的 边框 属性 有 以 下 几 种 : 

æ border-width 

æ border-color 

æ border-style 

æ border 
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1. 边框 宽度 : border-width 
边框 宽度 由 CSS 属性 border-width 定义 ,其 值 可 以 是 thin( 薄 )、medium( 普 通 ) 或 thick 
( 厚 ) 等 ,也 可 以 是 像素 值 ,如 图 6-4-1 所 示 。 


9px 


2px 4px 6px 8px 10px thin medium thick 
lpx 3px 5px 7px 


图 6-4-1 边框 宽度 


2. 边框 颜色 : border-color 

CSS 属性 border-color 用 于 定义 边框 的 颜色 。 其 值 就 是 正常 的 颜色 值 ,例如 :“# 
123456”*“rgb(123,123,123)”yellow” 等 。 

3. 边框 样式 : border-style 

border-style 属性 用 来 为 各 个 边框 设置 线 型 ,常用 的 值 有 solid, dashed, dotted, double 
等 ,使 用 none 则 是 无 边框 。 

如 图 6-4-2 所 示 , 显 示 了 8 种 边框 ,它们 都 是 以 金色 作为 边框 颜 色 ,边框 厚度 为 thick, 但 
是 样式 不 同 。 


dotted 
dashed 
solid 
double 
groove 
ridge 
inset 


outset 


LOOL 


图 6-4-2 不 同样 式 的 边框 
可 以 将 上 面 3 个 有 关 边 框 的 CSS 属性 组 合 起 来 使 用 ,从 而 制造 出 多 种 多 样 的 变化 。 来 
举 个 例子 ,我 们 要 为 一 个 文档 中 的 hl、h2、ul 和 p 等 元 素 分 别 定义 不 同 的 边框 。 
例 6-4-1 边框 样式 示例 


1 <html> 
2 <head> 
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3 <title> 边 框 </title> 

4 < style type = "text/css"> 
5 hl { 

6 border — width: thick; 
vi border - style: dotted; 
8 border - color :gold; 

9 $ 

10 h2 ( 

11 border — width: 20px; 
12 border - style: outset; 
13 border - color: red; 

14 } 

15 pl 

16 border - width: 1px; 

p? border - style: dashed; 
18 border - color: blue; 
19 ) 

20 ul ( 

21 border - width: thin; 
22 border - style: solid; 
23 border - color: orange; 
24 ) 

25 </style> 

26 </head> 

27 <body> 


28 < hl > 一 级 标题 </hl > 
29 < h2 > 二 级 标题 </h2 > 


30 <p> 段 落 </p> 

31 <ul> 

32 <1i> 北 京 </1i> 
33 <1i> 长 沙 </1i> 
34 <1i> 重 庆 </1i> 
35 </ul> 

36 </body> 

37 </html> 


代码 运行 结果 如 图 6-4-3 所 示 。 








E) FAshilihtml 万 - Gx| eos x A x G 








一 级 标题 























图 6-4-3 边框 样式 配合 使 用 
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也 可 以 为 上 边框 、 下 边框 、 右 边框、 左 边框 分 别 指定 特定 的 CSS 属性 。 具 体 做 法 如 下 例 
所 示 : 


1 hft 

2 border - top - width: thick; 

3 border - top - style: solid; 

4 border - top - color: red; 

5 border - bottom — width: thick; 
6 border - bottom — style: solid; 
F border - bottom — color: blue; 
8 border - right — width: thick; 


9 border - right — style: solid; 
10 border - right — color: green; 
11 border - left — width: thick; 
12 border - left - style: solid; 
13 border - left - color: orange; 
14 } 

4. 缩写 : border 


与 许多 其 他 属性 一 样 ,也 可 以 将 有 关 边 框 的 CSS 属性 缩写 为 一 个 border 属性 。 看 以 下 
例子 。 


Et 

2 border - width: 1px; 

3 border - style: solid; 
4 border - color: blue; 
| 

可 缩写 为 

1 pÍ 

2 border: lpx solid blue; 

3 ) 


border-width(border-style、border-color) 属 性 如 果 只 有 一 个 值 , 则 它 表示 4 条 边框 共同 
的 属性 ; 如 果 有 两 个 值 , 则 第 一 个 值 表示 项 边框 和 底 边框 的 属性 ,第 二 个 值 表示 左右 边框 的 
属性 ; 如 果 有 3 个 值 , 则 第 一 个 值 表示 顶 边框 的 属性 ,第 二 个 值 表示 左右 边框 的 属性 ,第 三 
个 值 表示 底 边 框 的 属性 。 

左右 相 邻 的 两 个 单元 格 本 来 有 各 自 独立 的 4 个 边框 ,大 部 分 时 候 我 们 希望 左边 单元 格 
的 右边 框 和 右边 单元 格 的 左边 框 合并 在 一 起 ,可 以 在 这 些 单 元 格 所 属 的 表格 上 设置 单元 格 
边框 的 合并 属性 值 为 collapse 即 可 , 即 : border-collapse:collapse。 


6.5 列表 


list-style 属性 用 于 定义 列表 的 各 类 风格 。 例 如 : 定义 列表 的 类 型 图 标 、 列 表 项 标记 的 
位 置 等 。 常 用 属性 有 如 下 几 种 : 
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æ list-style-type 


æ list-style-position 


æ list-style-image 


æ list-style 


1. 列表 项 标记 类 型 : list-style-type 
list-style-type 可 用 来 设置 列表 项 标记 的 类 型 ,常用 的 取 值 有 none, disc, circle, square, 




















decimal 等 ,如 表 6-5-1 所 示 。 
表 6-5-1 list-style-type 的 常用 取 值 

属 性 值 Ù R 示 例 
none 去 掉 修 饰 符 号 

disc 实心 圆 (< ul > 默认 类 型 ) s ia 
circle 空心 圆 u oa 
square 实心 正方 形 = x 
decimal 数字 (< ol > 默认 类 型 ) 








2. 列表 项 标记 位 置 : list-style-position 
list-style-position 属性 用 来 设置 列表 中 列表 项 标记 被 放置 的 位 置 ,常用 属性 有 inside 
和 outside, 取 值 inside 表示 列表 项 标志 插入 到 列表 区 域 开始 处 ,就 像 是 第 一 个 字符 ; outside 


则 表示 列表 项 标 


志 位 于 列表 区 域外 面 ,为 不 填 时 的 默认 值 。 


3. 列表 项 标记 图 像 : list-style-image 
list-style-image 属性 可 以 将 列表 项 标记 设置 为 图 像 。 取 值 为 图 像 的 地 址 ,也 可 设置 为 


none。 


4. 列表 项 标记 样式 : list-style 
list-style 可 将 所 有 用 于 列表 的 属性 值 设置 于 一 个 声明 中 。 与 前 面 的 简写 样式 一 样 , 它 
是 有 顺序 的 。 依 次 设置 list-style-type、list-style-position,list-style-image, 值 之 间 使 用 空格 


分 隔 。 
例 6-5-1 列表 样式 示例 
1 <html> 
2 <head> 
2, <title> 列 表 样 式 </title> 
4 < style type = "text/css"> 
5 ul. disc { 
6 list- style- type:disc; 
wh list- style— position:outside; 
8 } 
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代码 运行 结果 如 图 6-5-1 所 示 。 

















图 6-5-1 列表 样式 配合 使 用 


说 明 : 
list-style-type 属性 的 值 disc.circle.square 分 别 表示 圆 点 圆圈 、 正 方形 ,一 般 用 于 无 序 
列表 。 
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list-style-type 属性 的 值 decimal, lower-roman, upper-roman, lower-alpha, upper-alpha 
分 别 表示 阿拉 伯 数 字 、 小 写 英 文字 母 KERELE ,小写 希腊 字母 .大 写 希 腊 字母 ,一 般 用 
于 有 序列 表 。 





6.6 其 他 杂项 


除了 上 述 一 些 基 本 样式 之 外 ,还 有 一 些 其 他 常用 的 CSS 样式 属性 ,如 表 6-6-1 所 示 。 
表 6-6-1 常用 的 CSS 样式 属性 




















属 性 描 Ë 取 值 

display 设置 元 素 如 何 显示 可 设置 为 inline、block 等 方式 显示 ,设置 为 none 则 不 显示 
visibility 设置 元 素 的 可 见 性 可 设置 为 visible 或 hidden。 元 素 隐藏 ,但 仍然 占据 页 面 空间 
cursor 设置 光标 的 样式 常用 的 值 有 help、wait、move、pointer 等 ,光标 样式 不 一 样 


现在 通过 具体 的 范例 来 了 解 以 上 样式 。 
例 6-6-1 常用 CSS 样式 案例 


1 <html> 

2 <head> 

3 <title> 其 他 常用 样式 </title> 

4 < style type = "text/css"> 

5 div( 

6 width:220px; 

7 height :180px; 

8 border:1px solid blue; 

9 ) 

10 

11 </style> 

12 </head> 

13 <body> 

14 <div> 

35 < h2 style = "cursor:help;background - color:pink"> 光 标 HELP </h2 > 
16 <p style = "display:none"> display 隐藏 </p> 
17 <p style = "visibility:hidden"> visibility 隐藏 </p> 
18 <p> 常 用 样式 </p> 

19 </div> 

20 </body> 

21 </html> 


代码 运行 结果 如 图 6-6-1 所 示 。 

说 明 : 

鼠标 移动 到 < h2 > 标签 上 时 ,鼠标 变 为 帮助 的 图 标 。 

将 第 一 个 段落 显示 出 来 ,即将 display:none 修改 为 display:block, 重 新 运行 。 结 果 如 
图 6-6-2 所 示 。 
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图 6-6-1 列表 样式 配合 使 用 


人 SEE p ev]exeme — — < 


display 隐 藏 


用 样式 





6-6-2 ”将 第 一 段 display 显示 


可 以 看 到 ,使 用 visibility; hidden 隐藏 的 第 二 个 段落 仍然 占据 着 页 面 上 的 空间 。 

再 次 修改 代码 ,将 第 一 个 段落 隐藏 ,第 二 个 段落 显示 出 来 ,即将 visibility:hidden 改 为 
visibility:visible, 再 次 运行 ,如 图 6-6-3 所 示 。 

可 以 看 到 ,使 用 display: none 所 隐藏 的 部 分 不 会 占据 页 面 上 的 空间 。 





图 6-6-3 ”将 第 一 段落 display 隐藏 ,第 二 段落 显示 


Fa 
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总 结 


名 设置 背景 可 使 用 background 属性 ,包括 background-color, background-image, 
background-repeat、background-attachment、background-position 等 属性 。 

名 设置 文本 可 以 使 用 很 多 text- * 的 属性 ,包含 text-indent, text-align, text-decoration, 
letter-spacing、text-transform 等 属性 。 

名 设置 字体 可 使 用 font 属性 ,常用 到 的 有 font-family, font-style, font-variant, font- 
weight, font-size, line-height 等 属性 。 

名 设置 边框 可 以 使 用 border 属性 ,包含 border-width, border-color, border-style 等 
属性 。 

名 设置 列表 可 使 用 list-style 属性 ,包含 list-style-type list-style-position, list-style- 
image 等 属性 。 

名 其 他 比较 常用 的 还 有 元 素 的 隐藏 或 者 显示 ,还 可 以 对 元 素 上 方 的 光标 进行 样式 的 
设置 。 


课 后 习题 


(1) 在 HTML 页 面 中 显示 一 个 两 行 两 列 的 表格 ,在 其 中 编写 CSS 样式 代码 ,要 求 如 
表格 的 背景 颜色 为 “yellow”, 文 字 靠 右 对 齐 , 右 边框 线 显示 为 虚线 ,如 下 图 所 示 。 








(2) 模拟 下 图 所 示 的 页 面 。 


HLEN ibia | samana 


免费 注册 | 关于 拍 拍 | 拍 拍 助 理 | 联系 我 们 





背景 颜色 值 :#cae4ff 


拍 拍 简介 


腾讯 拍 拍 网 〈www. paipai. com) 是 腾讯 旗下 电子 商务 交易 平台 ， 
Mu FORALA LRA, 2006 年 3 月 13 日 宣布 正式 运营 。 


RAPI Bi 风尘 化 的 放大 内 庆 阁 以 有 了 亿 活 跃 用 户 的 优势 
资源 , 具备 良好 的 发 展 基础 。 拍 拍 网 运营 满 百 天 即 已 进入 “全 球 网 站 流 
量 排名 ”前 500 强 ( 据 al eza 数 据 ) ,并且 创下 电子 商务 网 站 进入 全 球 
网 站 500 强 的 最 超时 间 纪录 。 


版 权 信息 : copyright © 1998 - 2007 tencent inc. all rights reserved 
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(3) 创建 HTML 页 面 , 制 作 横向 导航 菜单 ,如 下 图 所 示 。 





提示 : 
上 图 所 示 导 航 效果 ,采用 的 是 列表 布局 ,参考 代码 如 下 : 


<ul> 
<li><a href ="#"> 首 页 </a></1i> 


ue Ó. 


</ul> 


鼠标 移 到 超 链接 时 其 背景 图 片 发 生 改 变 , 使 用 background-position 属性 来 设置 背景 图 
片 的 位 置 。 


£ J == 
1 





Web 标 准 与 页 面 布局 基础 e 


区 本 章 目 标 》 

名 理解 Web 标准 ,了 解 XHTML 

名 理解 CSS HERRA 

名 掌握 CSS 实现 页 面 布 局 所 需 的 样式 属性 
ET TT 

请 在 预习 时 学 会 下 列 单词 的 含义 和 发 音 , 并 填写 在 横 线 处 。 
XML: 


. behavior: 











. margin: 





. padding: 
block; 


. inline; 











. overflow: 





. position: 





oseon Ó m = %@ m = 


. relative: 





10. absolute: 





11. vertical; 





7.1 Web 标准 


W3C 即 万 维 网 联盟 (World Wide Web Consortium) .是 一 个 制定 相关 Web 标准 (如 
HTML、CSS 和 XML 等 ) 的 非 营 利 组 织 。 微 软 、Mozilla 基金 会 以 及 许多 其 他 的 公司 与 组 织 
都 是 W3C 的 成 员 ,它们 共同 协商 确定 Web 标准 的 未 来 发 展 。 
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同一 网 页 在 不 同 浏览 器 上 的 显示 效果 会 存在 着 天 壤 之 别 。 要 设计 一 个 能 在 Mozilla, 
Internet Explorer, Opera 及 其 他 现 有 浏览 器 上 都 能 良好 显示 的 网 页 ,是 件 十 分 费时 和 令 人 
头痛 的 事情 。 

制定 标准 的 目的 就 是 为 了 在 关于 “如 何 使 用 Web 技术 ”这 个 问题 上 达成 统一 意见 。 这 
意味 着 ,Web 开发 者 只 要 遵循 标准 就 能 确保 他 所 设计 的 网 页 能 在 不 同 浏览 器 上 均 有 较 良好 
的 显示 效果 。 因 此 ,建议 支持 W3C 的 工作 ,并 对 CSS 进行 验证 ,以 确保 符合 标准 。 

对 于 浏览 器 开发 商 和 Web 程序 开发 人 员 在 开发 新 的 应 用 程序 时 遵守 指定 的 标准 更 有 
利于 Web 更 好 地 发 展 。 开 发 人 员 按 照 Web 标准 制作 网 页 ,这 样 对 于 开发 者 来 说 就 更 加 简 
单 了 ,因为 他 们 可 以 更 容易 地 了 解 该 编码 使 用 的 Web 标准 ,将 确保 所 有 浏览 器 正确 显示 网 
站 而 无 须 费 时 重 写 。 遵 守 标 准 的 Web 页 面 可 以 使 得 搜索 引擎 更 容易 访问 并 收入 网 页 ,也 可 
以 更 容易 转换 为 其 他 格式 ,并 更 易于 访问 程序 代码 (如 JavaScript 和 DOM)。 

Web 标准 不 是 某 一 个 标准 ,而 是 一 系列 标准 的 集合 。 网 页 主要 由 3 部 分 组 成 : 结构 
(Structure) „I (Presentation) 和 行为 [Behavior) 。 对 应 的 标准 也 分 3 方面 : 结构 化 标准 
语言 主要 包括 XHTML 和 XML, 表现 标准 语言 主要 包括 CSS ,行为 标准 主要 包括 对 象 模型 
(如 W3C DOM) .ECMASCript 等 。 这 些 标准 大 部 分 由 万 维 网 联盟 (外 语 缩 写 : W3C) 起 章 
和 发 布 ,也 有 一 些 是 其 他 标准 组 织 制定 的 标准 ,例如 ECMA (European Computer 
Manufacturers Association) 的 ECMAScript 标准 。 


7.1.1 结构 标准 


可 扩展 标记 语言 XML 是 标准 通用 标记 语言 下 的 一 个 子 集 。 和 HTML 一 样 ,XML 同 
样 来 源 于 标准 通用 标记 语言 ,可 扩展 标记 语言 和 标准 通用 标记 语言 都 是 能 定义 其 他 语言 的 
语言 。XML 最 初 设计 的 目的 是 弥补 HTML 的 不 足 , 以 强大 的 扩展 性 满足 网 络 信息 发 布 的 
需要 ,后 来 逐渐 用 于 网 络 数据 的 转换 和 描述 。 

可 扩展 超 文本 标识 语言 (The Extensible HyperText Markup Language. XHTML), H 
前 推荐 遵循 的 是 W3C 于 2000 年 1 月 26 日 推荐 XML1.0。XML 虽然 数据 转换 能 力 强大 ， 
完全 可 以 替代 HTML, 但 面 对 成 千 上 万 已 有 的 站 点 ,直接 采用 XML 还 为 时 过 早 。 因 此 ,我 
们 在 HTML4.0 的 基础 上 ,用 XML 的 规则 对 其 进行 扩展 ,得 到 了 XHTML, 简单 地 说 , 建 
立 XHTML 的 目的 就 是 实现 HTML 向 XML 的 过 渡 。 


7.1.2 表现 标准 


层 琶 样式 表 (CSS)。 目 前 推荐 遵循 的 是 万 维 网 联盟 (W3C) 于 1998 年 5 月 12 日 推荐 
CSS2。W3C 创建 CSS 标准 的 目的 是 以 CSS 取代 HTML 表格 式 布局 、 帧 和 其 他 表现 的 语 
言 。 纯 CSS 布局 与 结构 式 XHTML 相 结 合 能 帮助 设计 师 分 离 外 观 与 结构 ,使 站 点 的 访问 及 
维护 更 加 容易 。 

7.1.3 行为 标准 

文档 对 象 模型 (Document Object Model, DOM)。 根 据 W3C DOM 规范 (http://www. 
w3. org/DOM/) ,DOM 是 一 种 与 浏览 器 、 平 台 \ 语 言 的 接口 ,使 得 用 户 可 以 访问 页 面 其 他 的 


标准 组 件 。 简 单 理解 ,DOM 解决 了 Netscape 的 Javascript 和 Microsoft 的 Jscript 之 间 的 冲 
突 ,给 予 Web 设计 师 和 开发 者 一 个 标准 的 方法 ,让 他 们 来 访问 他 们 站 点 中 的 数据 、 脚 本 和 表 
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现 层 对 象 。 
7.1.4 CSS 的 验证 


为 了 便于 验证 是 否 符合 CSS 标准 , W3C 开发 了 一 个 称 为 验证 器 的 程序 。 它 可 以 读 取 
样式 表 , 并 验证 样式 表 是 否 符合 CSS 标准 ,如 果 不 符合 , 它 会 列 出 错误 并 给 出 警告 信息 。 

为 了 方便 进行 样式 表 的 验证 ,可 以 直接 在 网 页 上 进行 验证 。 只 要 在 下 面 的 输入 框 里 提 
供 自己 的 样式 单 的 URL, 并 单 击 “ 验 证 样式 表 ” 即 可 。 如 果 有 错误 ,网 页 上 将 给 出 有 关 错 误 
信息 。 如 输入 网 址 http://www. html. net/site/style/screen. css 进行 验证 。 

如 果 验 证 器 没有 发 现任 何 错误 ,那么 网 页 上 将 显示 下 面 的 图 片 。 可 以 将 这 个 图 片 放 在 
网 页 里 ,表明 所 用 的 CSS 是 符合 标准 的 。 

也 可 以 通过 下 面 的 链接 进入 W3C CSS 验证 器 页 面 : http://jigsaw. w3. org/css- 


validator/ 。 





7.2 XHTML 


可 扩展 超 文本 标记 语言 是 一 种 置 标语 言 ,表现 方式 与 超 文 本 标记 语言 (HTML) 类 似 ， 
不 过 语法 上 更 加 严格 。 

从 继承 关系 上 讲 , HTML 是 一 种 基于 标准 通用 置 标语 言 的 应 用 ,是 一 种 非常 灵活 的 置 
标语 言 , 而 XHTML 则 基于 可 扩展 标记 语言 ,可 扩展 标记 语言 是 标准 通用 置 标语 言 的 一 个 
子 集 。XHTML 1.0 在 2000 年 1 月 26 日 成 为 W3C 的 推荐 标准 。 

XHTML 是 当前 HTML 版 的 继承 者 。HTML 语法 要 求 比 较 松 散 , 这 样 对 网 页 编写 者 
来 说 ,比较 方便 ,但 对 于 机 器 来 说 ,语言 的 语法 越 松 散 ,处 理 起 来 就 越 困 难 , 对 于 传统 的 计算 
机 来 说 ,还 有 能 力 兼 容 松散 语法 ,但 对 于 许多 其 他 设备 ,如 手机 ,难度 就 比较 大 。 因 此 产生 了 
由 DTD( 文 档 类 型 定义 ) 定 义 规则 .语法 要 求 更 加 严格 的 XHTML 。 

大 部 分 常见 的 浏览 器 都 可 以 正确 地 解析 XHTML, 即使 旧版 本 的 浏览 器 ,XHTML 作为 


HTML 的 一 个 子 集 , 许 多 也 可 以 解析 。 也 就 是 说 ,几乎 所 有 的 网 页 浏览 器 在 正确 解析 HTML 


的 同时 ,可 兼容 XHTML。 当然 ,从 HTML 完全 转移 到 XHTML ,还 需要 一 个 过 程 。 

与 层 释 式 样式 表 (CSS) 结 合 后 ,XHTML 能 发 挥 真 正 的 威力 ; 这 使 实现 样式 与 内 容 分 
离 的 同时 ,又 能 有 机 地 组 合 网 页 代码 ,在 另外 的 单独 文件 中 ,还 可 以 混合 各 种 XML 应 用 ,如 
MathML SVG。 

XHTML 与 HTML 对 比 有 以 下 几 个 不 同 : 

名 所 有 的 标记 都 必须 要 有 一 个 相应 的 结束 标记 。 

以 前 在 HTML 中 ,可 以 打开 许多 标签 ,例如 使 用 < li > 而 不 一 定 写 对 应 的 </1i > 来 关闭 
它们 。 但 在 XHTML 中 这 是 不 合法 的 。 XHTML 要 求 有 严谨 的 结构 ,所 有 标签 必须 关闭 。 
如 果 是 单独 不 成 对 的 标签 ,在 标签 最 后 加 一 个 “/” 来 关闭 它 。 例 如 : 


< img height = "80" alt = "网 页 设计 师 " src= "../images/logo_w3cn_200x80. gif" width = "200" />。 


名 所 有 标签 的 元 素 和 属性 的 名 字 都 必须 使 用 小 写 。 
与 HTML 不 一 样 ,XHTML 对 大 小 写 是 敏感 的 ,< title > 和 < TITLE > 是 不 同 的 标签 。 
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XHTML 要 求 所 有 的 标签 和 属性 的 名 字 都 必须 使 用 小 写 。 例 如 ,< BODY > 必须 写成 < body >。 
大 小 写 夹杂 也 是 不 被 认可 的 ,通常 Dreamweaver 自动 生成 的 属性 名 字 onMouseOver 也 必 
须 修改 成 onmouseover, 

Z AW XML 标记 都 必须 合理 说 套 。 

同样 因为 XHTML 要 求 有 严谨 的 结构 ,因此 所 有 的 嵌 套 都 必须 按 顺 序 , 以 前 这 样 写 的 
代码 : <p><b></p></b>, 必 须 修改 为 : <p><b></b></p>。 

就 是 说 ,一 层 一 层 的 嵌 套 必须 是 严格 对 称 。 

名 所 有 的 属性 必须 用 引号 "" 括 起 来 。 

在 HTML 中 ,可 以 不 需要 给 属性 值 加 引号 ,但 是 在 XHTML 中 ,它们 必须 被 加 引号 。 
例如 : < height=80 > 必须 修改 为 : < height 二 "80">。 特 殊 情况 ,需要 在 属性 值 里 使 用 双 引 
号 ,可 以 用 ", 单 引号 可 以 使 用 Q. apos; ,例如 : <alt="say&-apos;hello&-apos; ">. 

名 把 所 有 三 和 & 特殊 符号 用 编码 表示 。 

任何 小 于 号 (所 ) ,不 是 标签 的 一 部 分 ,都 必须 被 编码 为 & 1 t ; 

任何 大 于 号 (二 ) ,不 是 标签 的 一 部 分 ,都 必须 被 编码 为 & gt; 

任何 与 号 (&&) ,不 是 实体 的 一 部 分 的 ,都 必须 被 编码 为 & a m p; 

注 : 以 上 字符 之 间 无 空格 。 

所 给 所 有 属性 赋 一 个 值 。 

XHTML 规定 所 有 属性 都 必须 有 一 个 值 ,没有 值 的 就 重复 本 身 。 例 如 : 


< input type = "checkbox" name = "shirt" value = "medium" checked> 

必须 修改 为 : 

< input type = "checkbox" name = "shirt" value = "medium" checked = "checked" /> 

避 不 要 在 注释 内 容 中 使 用 “--”。 

“一 ”只 能 发 生 在 XHTML 注释 的 开头 和 结束 ,也 就 是 说 ,在 内 容 中 它们 不 再 有 效 。 例 如 
下 面 的 代码 是 无 效 的 : 


<! -- 这 里 是 注释 ----------- 这 里 是 注释 -> 
用 等 号 或 空格 替换 内 部 的 虚线 。 
<! -- 这 里 是 注释 ============ 这 里 是 注释 -> 


以 上 这 些 规 范 有 的 看 上 去 比较 奇怪 ,但 这 一 切 都 是 为 了 使 我 们 的 代码 有 一 个 统一 、 唯 一 
的 标准 ,便于 以 后 的 数据 再 利用 。 

名 图 片 必须 有 说 明文 字 。 

每 个 图 片 标签 都 必须 有 alt 说 明文 字 。 

<img src= "ball. jpg" alt= "large red ball" title= "large red ball"/> // 为 了 兼容 火狐 
A IE WW aw. X TE bs 2. S Br 3 alt 和 title 双 标 签 , 单 纯 的 alt 标签 在 火狐 下 没有 图 
片 说 明 ! 

那么 如 何 将 HTML 转换 为 XHTML 呢 ? 

芯 添 加 一 个 XHTML <! DOCTYPE > 到 网 页 中 。 
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名 添加 xmlns 属性 到 每 个 页 面 的 HTML 元 素 中 。 
名 修改 所 有 的 元 素 为 小 写 。 

名 关闭 所 有 的 空 元 素 。 

名 修改 所 有 的 属性 名 称 为 小 写 。 

名 所 有 属性 值 添加 引号 。 


7.3 CSS 中 的 盒 状 模型 


盒 状 模型 (box model) 是 实现 页 面 布局 的 基础 ,学习 页 面 的 布局 必须 先 理解 盒 状 模型 。 
7.3.1 ARRE 


盒子 的 概念 在 我 们 生活 中 并 不 陌生 ,例如 礼品 的 包装 盒 , 礼 品 是 最 终 运 输 的 物品 ,四 周 
一 般 会 添加 用 于 抗 振 的 填充 材料 ,再 外 面 是 包装 纸 过 ,如 图 7-3-1 所 示 。 





7-3-1 现实 中 的 盒子 


CSS 中 盒子 模型 的 概念 与 此 类 似 , 它 可 用 于 描述 一 个 为 HTML 元 素 形 成 的 矩形 盒子 。 
盒 状 模型 还 涉及 为 各 个 元 素 调 整 外 边 距 (margin) ,边框 (border) .内 边 距 (padding) 和 内 容 
的 具体 操作 。 图 7-3-2 显示 了 盒 状 模型 的 结构 。 








7-3-2 CSS 中 的 盒 装 模型 
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它 包 括 如 下 属性 : 

æ WHE border): 对 应 包装 盒 的 纸 壳 ,边框 有 大 小 和 颜色 之 分 。 

a WE (padding): 位 于 边框 内 部 ,是 内 容 与 边框 的 距离 ,相当 于 怕 盒 子 里 装 的 东西 

(贵重 的 ) 损 坏 而 添加 的 泡沫 或 其 他 抗 振 的 辅料 。 

a SMH E (margin): 位 于 边框 外 部 ,是 边框 外 周围 的 间隙 ,有 的 书 中 也 称 之 为 “边界 ”。 

a W Content): 对 应 盒 内 物品 。 

除了 平面 结构 外 ,盒子 模型 还 包括 三 维 的 立体 
结构 图 ,如 图 7-3-3 所 示 , 从 上 往 下 看 , 它 表 示 的 层次 
关系 依次 如 下 : 

名 边框 (border) ,位 于 盒子 的 第 一 层 。 

Z JCR Pq X (content) , A J HE (padding) ,两 者 y border 
同位 于 第 二 层 。 “(= 

名 背景 图 (background-image) ,位 于 第 三 层 。 一 一 

名 背景 色 (background-color) ,位 于 第 四 层 。 图 7-3-3 CSS 中 的 盒 状 模型 三 维 示意 图 

名 整个 盒子 的 外 边 距 (margin) ,位 于 第 五 层 。 

上 面 的 图 示 看 上 去 可 能 感觉 有 点 理论 化 ,好 吧 , 下 面试 着 用 一 个 实例 来 解释 盒 状 模型 。 
在 例子 中 ,有 一 个 标题 和 一 些 文本 。 该 例 的 HTML 代码 如 下 (摘自 世界 人 权 宣 言 ) : 





mus. 


1 <hl>Article 1:</hl> 

2 <p>All human beings are born free and equal 
3 indignity and rights. They are endowed 

4 with reason and conscience and should 

5 act towards one another in a spirit of 

6 brotherhood 
7 </p> 


通过 添加 一 些 颜色 及 字体 信息 ,该 例 可 以 有 如 图 7-3-4 所 示 的 显示 效果 。 
这 个 例子 包含 了 两 个 元 素 : hl 和 p。 这 两 个 元 素 的 盒 状 模型 如 图 7-3-5 所 示 。 














Article 1 














图 7-3-4 hl 标签 和 p 标签 显示 图 图 7-3-5 hl 标签 和 p 标签 对 应 的 盒 状 模型 


尽管 图 7-3-5 显得 有 点 复杂 ,不 过 它 展 示 了 每 个 HTML 元 素 是 如 何 被 盒子 所 围绕 的 。 
可 以 通过 CSS 来 调整 这 些 盒子 。 
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因为 盒子 是 矩形 结构 ,所 以 边框 ,内 边 距 、 外 边 距 这 些 属性 都 分 别 对 应 着 上 (top)、 下 
(bottom) 、 左 (left)、 右 (right)4 个 边 , 这 4 个 边 的 设置 可 以 不 同 。 

此 外 ,盒子 还 有 块 级 盒子 (block box) 和 内 联 盒子 (inline box) 之 分 。 这 两 种 盒子 分 别 是 
块 级 元 素 与 内 联 元 素 的 默认 盒子 模型 。 

常见 的 块 级 元 素 有 div \table ,form \fieldset\ hl 一 h6、p、.ol\ul\li\hr 等 。 常 见 的 内 联 元 
素 有 span ,alabel input, select, textarea img, embed 等 标签 元 素 。 在 显示 时 , 块 级 元 素 显 
示 为 独立 的 一 块 矩形 区 域 , 它 的 前 后 都 会 换行 ; 内 联 元 素 不 会 换行 , 它 会 和 其 他 内 联 元 素 一 
起 在 一 行内 显示 。 

一 般 来 说 ,内 敛 元 素 只 能 包含 文本 和 其 他 内 联 元 素 ; 而 块 级 元 素 则 能 包含 内 联 元 素 和 
其 他 块 级 元 素 。 

所 有 被 body 包含 的 元 素 ,要 么 是 块 级 的 ,要 么 是 内 联 的 ,要 么 既是 块 级 的 又 是 内 联 的 ; 
不 存在 一 个 能 被 body 包含 但 既 非 块 级 也 非 内 联 的 元 素 。 


7.3.2 margin( 外 边 距 ) 


margin( 外 边 距 ) 位 于 盒子 的 边框 外 ,表示 从 一 个 元 素 的 边 到 相 邻 元 素 ( 或 者 文档 边界 ) 
之 间 的 距离 。 根 据 上 、 下 、 左 、 右 4 个 方向 ,可 细 分 为 上 外 边 距 、 下 外 边 距 、 左 外 边 距 和 右 外 边 
距 。 具 体 属 性 如 表 7-3-1 所 示 。 


表 7-3-1 margin 的 具体 属性 























属 性 a Xx 举 A 
margin-top 上 外 边 距 margin-top: 1px 
margin-bottom 下 外 边 距 margin-bottom:2px 
margin-left 左 外 边 距 margin-left: 3px 
margin-right 右 外 边 距 margin-right: 5px 
margin 在 一 个 声明 中 统一 设置 4 个 方向 的 外 边 距 margin:1px 2px 5px 4px 

注意 : 


可 以 分 别 设置 4 个 方向 的 属性 ,也 可 以 使 用 margin 一 次 性 设置 ,但 是 必须 按照 顺 时 针 
方向 依次 代表 上 (top)、 右 (right) 、 下 (bottom) 、 左 (left)。 如 省 略 , 则 按 上 下 左右 同 值 处 理 ， 
这 些 规则 同样 适用 于 后 续 讲 解 的 边框 和 内 边 距 , 举 例 说 明 如 下 : 

æ margin: lpx 2px 3px 4px 表示 上 外 边 距 1px, 右 外 边 距 2px, 下 外 边 距 3px, 左 外 边 

距 4px。 

margin:1px 2px 3px 等 同 于 margin:1px 2px 3px 2px。 

æ margin: lpx 2px 等 同 于 margin:1px 2px 1px 2px。 

æ margin: lpx 等同 于 margin:lpx lpx lpx 1px。 

取 值 一 般 使 用 像素 单位 , 即 px, 也 可 以 使 用 百分比 。 特 殊 设 置 例如 把 水 平 设 置 为 auto, 
表示 让 计算 器 计算 外 边 距 ,一 般 表 现 为 水 平 居 中 。 例 如 margin:0px auto, 表 示 在 父 级 元 素 
容器 中 水 平 居中 (上 下 边 距 为 Opx, 左 右边 距 自 动 计算 )。 

例如 要 实现 如 图 7-3-6 所 示 的 效果 。 

那么 代码 如 下 所 示 : 
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bottom 


-3-6 ”外 边 距 


图 7 





或 者 直接 使 用 简写 : 





示例 


例 7-3-1 外 边 距 
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16 width:400px; 

37 margin:0px auto; 

18 border:1px solid red; 

19 Í 

20 </style> 

21 </head> 

22 

23 <body> 

24 <p class = "normal"> 普 通 段 落 </p> 

25 <p class = "margin"> 有 边 距 的 段落 , 按 顺 时 针 来 设置 外 边 距 。</p> 
26 <p class = "automargin"> 位 置 水 平 居中 的 段落 ,不 是 指 里 面 的 内 容 </p> 
27 </body> 

28 </html> 


代码 运行 如 图 7-3-7 所 示 。 


























图 7-3-7 外 边 距 示例 


对 于 < p > 标签 中 的 内 容 实 现 水 平 居 中 ,我 们 可 以 使 用 之 前 学 过 的 “text-align: center”; 
对 于 垂直 居中 ,常见 的 是 单行 文字 的 居中 问题 .可 以 设置 文字 所 在 行 的 高 度 height 与 文字 
行 高 属性 “line-height” 一 致 。 


例如 : 


1 


div[width:200px;height:200px;line- height:200px; ---- } 


7.3.3 border( 边 框 ) 
对 于 边框 ,在 第 6 章 有 过 详细 的 介绍 ,这 里 就 不 再 重复 讲解 了 。 


7.3.4 padding( 内 边 距 ) 


边框 确定 好 了 之 后 ,一般 还 要 设置 边框 与 内 容 之 间 的 距离 ,以 便 精确 控制 内 容 在 盒子 中 
的 位 置 。 与 border 最 明显 的 区 别 在 于 : padding 并 非 实体 ,而 是 透明 留 白 ,所 以 并 没有 修饰 
属性 ,与 外 边 距 比较 相似 。 常 用 属性 如 表 7-3-2 所 示 。 
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表 7-3-2 padding 的 常用 属性 





























B 性 & x 3 f 
padding-top 内 容 与 上 边框 的 距离 padding-top: 1px 
padding-bottom 内 容 与 下 边框 的 距离 padding-bottom: 2px 
padding-left 内 容 与 左边 框 的 距离 padding-left: 3px 
padding-right 内 容 与 右边 框 的 距离 padding-right: 5px 
padding 在 一 个 声明 中 统一 设置 4 个 方向 的 填充 距离 padding: 1px 2px 5px 4px 

注意 : 
填充 距离 不 允许 为 负 值 。 


可 以 使 用 padding 一 次 性 设置 4 个 方向 的 填充 距离 ,与 margin 一 样 ,也 是 按照 顺 时 针 
方向 来 设置 , 即 上 、 右 、 下 、 左 的 顺序 。 

下 面 来 看 一 个 简单 的 例子 : 

例 7-3-2 内 边 距 示 例 


1 <!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
2 "http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
3 <html> 

4 <head> 

5 <title> 内 边 距 </title> 

6 < style type = "text/css"> 

7 h2 ( 

8 background: orange; 

9 padding — left :120px; 

10 } 

11 p{ 

12 background: yellow; 

T3 padding: 20px 20px 20px 80px; 

14 } 

15 </style> 

16 </head> 

17 < body> 

18 < h2 > 左 内 边 距 120px </h2 > 

19 <p> 上 下 内 边 距 为 20px, 右 内 边 距 20px, 左 内 边 距 80px </p> 
20 </body> 

21 </html> 


代码 运行 如 图 7-3-8 所 示 。 








JOE rerin p- cx |[ ë sos x Aw ri] 
ENUM 


上 下 内 边 距 为 20px， 右 内 边 距 20px， 左 内 边 距 80px 























7-3-8 ”内 边 距 示例 


内 容 
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7.3.5 宽 高 及 实际 占 位 


CSS 尺寸 属性 指 的 是 content 内 容 区 域 的 宽 和 高 。 使 用 width 和 height 属性 可 以 设置 
区 域 的 宽度 和 高 度 。 
1. 设 定 宽度 : width 
可 以 通过 width 属性 来 设 定 一 个 元 素 的 宽度 , 即 在 水 平方 向 上 的 尺寸 。 下 面 是 一 个 简 





单 的 例子 , 它 为 我 们 提供 了 一 个 可 以 容纳 文本 的 盒子 。 


和 


1 div.box ( 

2 width: 500px; 

3 border: 1px solid black; 
4 background: orange; 

5. 


2. 设 定 高 度 : height 

意 上 一 个 例子 ,盒子 里 内 容 的 长 短 决 定 了 盒子 的 高 度 。 也 可 以 通过 height 属性 来 设 
个 元 素 的 高 度 。 例 如 ,要 把 上 面 那 个 例子 中 的 盒子 高 度 设 定 为 200 像素 ,代码 如 下 : 
J 7-3-3 元 素 宽 高 示例 





1 <!DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Strict//EN" 
2 "http://www. w3. org/TR/xhtm11/DTD/xhtm11 - strict. dtd"> 
3 <html> 

4 <head> 

5 <title> 宽 高 </title> 

6 < style type = "text/css"> 

7 div{ 

8 height: 200px; 

9 width: 500px; 

10 border: 1px solid black; 

Lal background: orange; 

12 } 

13 </style> 

14 </head> 

15 <body> 

16 <div></div> 

17 </body> 

18 </html> 


代码 运行 如 图 7-3-9 所 示 。 
对 于 某 个 页 面 元素 , 有 如 下 的 结论 : 
元 素 的 实际 占 位 尺寸 = 元 素 尺寸 十 填充 十 边框 
这 个 结论 按照 横 纵 向 可 分 为 以 下 两 种 情况 : 
忌 元 素 的 实际 占 位 高 度 = height 属性 十 上 下 填充 高 度 十 上 下 边框 高 度 
名 元 素 的 实际 占 位 宽度 = width 属性 十 左右 填充 高 度 十 左右 边框 厚度 
理解 页 面 元 素 的 宽 高 和 实际 占 位 的 关系 ,有 助 于 提高 我 们 后 续 页 面 布局 中 尺寸 大 小 的 


计算 。 
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图 7-3-9 ”元素 宽 高 示例 


7.3.6 溢出 


当 内 容 区 域 的 尺寸 不 足以 容纳 元 素 的 内 容 时 ,超出 的 部 分 如 何 处 理 呢 ? 使 用 overflow 
属性 可 以 设置 如 何 处 理 溢出 的 内 容 , 如 表 7-3-3 所 示 。 


表 7-3-3 overflow 属性 的 取 值 























属 性 取 f #f 述 
visible 默认 值 。 内 容 不 会 被 修剪 ,会 呈现 在 元 素 框 之 外 
hidden 内 容 会 被 修剪 ,并 且 其 余 内 容 是 不 可 见 的 

overflow scroll 内 容 会 被 修剪 ,但 是 会 显示 滚动 条 以 便 查看 其 余 的 内 容 
auto 如 果 内 容 被 修剪 , 则 会 显示 滚动 条 以 便 查 看 其 余 的 内 容 
inherit 规定 应 该 从 父 元 素 继承 overflow 属性 的 值 

下 面 来 看 一 个 示例 : 


例 7-3-4 内 容 溢出 示例 


1 <!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
2 "http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
3 <html> 

4 <head> 

5 <title> 内 容 溢 出 </title> 

6 < style type = "text/css"> 

7: div{ 

8 height: 200px; 

9 width: 300px; 

10 border: 1px solid black; 

11: background: orange; 

12 overflow: scroll; 

13 } 

14 </style> 


15 </head> 
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16 <body> 

17 <div> 

18 <hl > 一 级 标题 </hl > 
19 < h2 > 二 级 标题 </h2 > 
20 < h3 > 三 级 标题 </h3 > 
21 < h4 > 四 级 标题 </h4 > 
22 <h5 > 五 级 标题 </h5 > 
23 < h6 > 六 级 标题 </h6 > 
24 </div> 








图 7-3-10 内容 溢出 示例 


内 容 没有 完全 显示 ,因为 设置 了 overflow 属性 ,所 以 在 < div > 标签 内 出 现 了 垂直 滚 
动 条 。 


7.4 元素 的 定位 


利用 CSS 定位 命令 可 以 将 一 个 元 素 精确 地 放 在 页 面 上 我 们 所 指定 的 地 方 。 
7.4.1 CSS 定位 的 原理 


把 浏览 器 窗口 想象 成 一 个 坐标 系统 ,如 图 7-4-1 所 示 。 
CSS 定位 的 原理 是 : 可 以 将 任何 盒子 (box) 放 置 在 坐标 系统 的 任何 位 置 上 。 假 设 要 放 
置 一 个 标题 。 通 过 使 用 盒 状 模型 ,标题 将 显示 如 下 : 


Headline 


如 果 要 把 这 个 标题 放置 在 距 文档 顶部 100 像素 .左边 200 像素 的 地 方 ,可 以 在 CSS 中 
输入 以 下 代码 : 
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图 7-4-1 将 浏览 器 看 成 坐标 系统 


1 hl( 

2 position:absolute; 
3 top: 100px; 

4 left: 200px; 

SN: 


得 到 的 效果 如 图 7-4-2 所 示 。 


op tone [15bpr 200p ?Spe oppx S ore sppx Sophx 
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图 7-4-2 hl 标签 在 坐标 系统 中 的 位 置 


采用 CSS 定位 技术 来 放置 元 素 是 非常 精确 的 。 相 对 于 使 用 表格 、. 透 明 图 像 或 其 他 方法 
而 言 ,CSS 定位 要 简单 得 多 。 


7.4.2 绝对 定位 


一 个 采用 绝对 定位 的 元 素 不 获得 任何 空间 。 这 意味 着 : 该 元 素 在 被 定位 后 不 会 留 下 空 
位 。 要 对 元 素 进行 绝对 定位 ,应 将 position 属性 的 值 设 为 absolute。 接 着 ,可 以 通过 left, 
right、top 和 bottom 属性 来 设 定 将 盒子 放置 在 哪里 。 举 个 绝对 定位 的 例子 ,假如 要 在 文档 
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而 





的 4 个 角落 各 放置 一 个 盒子 ,代码 如 下 : 


例 7-4-1 绝对 定位 示例 

1 <!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
2 "http: //www.w3.org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
3 <html> 

4 <head> 

5 <title> 绝 对 定位 </title> 

6 < style type = "text/css"> 

yi #boxl { 

8 position:absolute; 

9 top: 50px; 

10 left: 50px; 

11 width:100px; 

12 height:100px; 

13 background - color:red; 
14 } 

15 # box2 { 

16 position:absolute; 

17 top: 50px; 

18 right: 50px; 

19 width:100px; 

20 height :100px; 

21 background - color: yellow; 
22 ) 

23 # box3 ( 

24 position:absolute; 

25 bottom: 50px; 

26 right: 50px; 

27 width:100px; 

28 height :100px; 

29 background - color:blue; 
30 } 

31 # box4 { 

32 position:absolute; 

33 bottom: 50px; 

34 left: 50px; 

35 width:100px; 

36 height :100px; 

37 background - color:pink; 
38 ) 

39 # box5 { 

40 position:absolute; 

41 bottom: 80px; 

42 left: 80px; 

43 width:400px; 

44 height:400px; 

45 background - color: green; 
46 ) 
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47 </style> 

48 </head> 

49 <body> 

50 <div id= "box1"></div > 
mal <div id= "box2"></div > 
52 <div id= "box3"></div> 
53 <div id= "box4"></div> 
54 <div id= "box5"></div > 
55 </body> 

56 </html> 


代码 运行 如 图 7-4-3 所 示 。 





E) FAshili.html 

















图 7-4-3 绝对 定位 示例 图 


为 position 属性 赋值 为 absolute 时 ,页 面 元 素 将 被 脱离 出 正常 的 文档 流 ,进行 绝对 定位 
而 不 考虑 它 周 围 内 容 的 布局 。 必 须 指定 top, bottom, left, right 属性 中 的 至 少 一 个 来 为 页 面 
元 素 提供 坐标 。 

如 果 设 置 了 绝对 定位 的 页 面 元 素 的 上 级 元 素 设置 过 position 属性 , 则 坐标 系 以 直接 上 
级 元 素 的 左上 角 为 坐标 ; 如 果 上 级 元 素 没有 设置 过 position 属性 , 则 坐标 系 以 文档 正 
文 区 域 的 左上 角 为 坐标 原点 。 


7.4.3 相对 定位 


要 对 元 素 进行 相对 定位 ,应 将 position 属性 的 值 设 为 relative。 绝 对 定位 与 相对 定位 的 
区 别 在 于 计算 位 置 的 方式 。 

采用 相对 定位 的 元 素 , 其 位 置 是 相对 于 它 在 文档 中 的 原始 位 置 计算 而 来 。 这 意味 着 , 相 
对 定位 是 通过 将 元 素 从 原来 的 位 置 向 右 、 向 左 、 向 上 或 向 下 移动 来 定位 。 采 用 相对 定位 的 元 
素 会 获得 相应 的 空间 。 

举 个 相对 定位 的 例子 ,可 以 相对 于 3 张 图 片 在 页 面 上 的 原始 位 置 来 对 它们 进行 相对 定 
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位 。 注 意 这 些 图 片 将 在 文档 中 各 自 的 原始 位 置 处 留 下 空位 。 
例 7-4-2 相对 定位 示例 


eonan wne 


已 
° 


24 
25 





<! DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
"http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
<html> 
<head> 
<title> 相 对 定位 </title> 
< style type = "text/css"> 
p{ 
margin: 0px; 
border:1px solid red; 
width:200px 
+ 
#p1{ 
position:relative; left:30px; 
} 
#p2{ 
position:relative;top:20px; 
} 
</style> 
</head> 
< body> 
<p id= "pl"> 第 一 个 段落 </p> 
<p> 第 二 个 段落 </p> 
<p id= "p2"> 第 三 个 段落 </p> 
</body> 
</html> 


代码 运行 如 图 7-4-4 所 示 。 


oie 


CO -oxlemwe | mu 











图 7-4-4 相对 定位 示例 图 


为 position 属性 赋值 relative, 页面 元 素 仍 将 处 于 正常 的 文档 流 中 ,但 会 相对 于 自己 在 
上 级 元 素 中 的 初始 位 置 进行 偏 移 , 偏 移 量 由 top, bottom, left, right 属性 中 的 一 个 或 两 个 值 


来 确定 。 


7.4.4 固定 定位 
固定 定位 和 绝对 定位 有 相似 之 处 ,IE6 以 上 版 本 才 支 持 这 项 属性 ,固定 定位 总 是 以 当前 
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的 页 面 为 基准 进行 偏 移 ,与 背景 图 片 固 定 、 内 容 滚动 的 效果 一 样 。 
例 7-4-3 固定 定位 示例 


1 <!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
2 "http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
3 <html> 

4 <head> 

5 <title> 固 定 定位 </title> 
6 < style type = "text/css"> 
$ #divi{ 

8 background: green; 

9 width:100px; 

10 text - align:center; 
11 position: fixed; 

12 right :20px; 

13 top:50px; 

14 } 

15 .div2{ 

16 width:560px; 

17 background:blue; 

18 text — indent :2em; 

19 } 

20 </style> 

21 </head> 

22 <body> 

23 <div id= "div1"> 

24 <ul> 

25 <li>111 </li> 

26 <1i> 222 </1i> 

27 <1i>333 </1i> 

28 </ul> 

29 </div> 

30 <div class = "div2"> 


31 <p> 一 个 段落 一 个 段落 一 个 段落 一 个 段落 一 个 段落 一 个 段落 一 个 段落 </p> 
32 <p> 一 个 段落 </p><p> 一 个 段落 </p><p> 一 个 段落 </p><p> 一 个 段落 </p> 
33 </div> 

34 <div class= "div2"> 

35 <p> 一 个 段落 一 个 段落 一 个 段落 一 个 段落 一 个 段落 一 个 段落 一 个 段落 </p> 
36 <P> 一 个 段落 </p><p> 一 个 段落 </p><p> 一 个 段落 </p><p> 一 个 段落 </p> 








37 </div> 

38 < div class = "div2"> 

39 <p> 一 个 段落 一 个 段落 一 个 段落 一 个 段落 一 个 段落 一 个 段落 一 个 段落 </p> 
40 <p> 一 个 段落 </p><p> 一 个 段落 </p><p> 一 个 段落 </p><p> 一 个 段落 </p> 
41 </div> 

42 </body> 

43 </html> 


代码 运行 如 图 7-4-5 所 示 。 
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图 7-4-5 固定 定位 示例 图 


为 position 属性 设置 了 fixed 的 页 面 元 素 , 不 随 页 面 的 滚动 而 移动 。 本 例 中 , 它 始终 都 
位 于 页 面 的 右上 角 。 


7.5 层次 堆 琶 


CSS 可 以 处 理 高 度 、 宽 度 、 深 度 3 个 维度 。 在 前 面 的 课程 中 ,已 经 了 解 了 前 两 个 维度 。 在 
本 节 中 ,将 学 习 如 何 令 不 同 元 素 具 有 层次 。 简 言 之 ,就 是 关于 元 素 堆 释 的 次 序 问题 。 为 此 ,可 
以 为 每 个 元 素 指 定 一 个 数字 (z-index)。 其 原理 是 : 
数字 较 大 的 元 素 将 县 加 在 数字 较 小 的 元 素 之 上 。 

例如 ,我 们 正在 打 扑 克 , 并 且 拿 了 一 手 同 花 大 
顺 。 我 们 可 以 通过 为 各 张 牌 设 定 一 个 z-index 的 方 







z-index: 1 
z-index: 2 


z-index: 3 








式 来 表示 这 手 牌 ,如 图 7-5-1 所 示 。 — 
在 这 个 例子 中 ,采用 了 1—5 五 个 连续 的 数字 来 NR 

表示 堆 秋 次 序 ,但 是 也 可 以 用 5 个 不 同 的 其 他 数字 Ë 

来 取得 同样 的 效果 。 这 里 的 要 点 在 于 : 用 数字 的 大 

小 次 序 反 映 希 望 的 堆 秋 次序 。z-index 属性 及 其 取 

值 描述 如 下 所 示 。 EEDA ESSER 
属 性 取 值 描 述 











z-index 使 用 数字 设 定 数字 越 大 越 靠近 浏览 者 。 为 负数 时 ,作为 页 面 正文 背景 显示 
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现在 来 实现 上 面 的 堆 生 效果 。 
例 7-5-1 div BJ 3E Ë 


1 <!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
2 "http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
3 <html> 

4 <head> 

5 <title> fixed</title> 

6 < style type = "text/css"> 

7 # div1 { 

8 position: absolute; 

9 left: 100px; 

10 bottom: 100px; 

di z — index: 1; 

12 width:60px; 

13 height :100px; 

14 background - color:red; 
15 } 

16 #div2 { 

t7 position: absolute; 

18 left: 115px; 

19 bottom: 115px; 

20 z — index: 2; 

21 width: 60px; 

22 height :100px; 

23 background - color: yellow; 
24 ) 

25 # div3 { 

26 position: absolute; 

27 left: 130px; 

28 bottom: 130px; 

29 z— index: 3; 

30 width:60px; 

31 height:100px; 

32 background - color:blue; 
33 ) 

34 </style> 

35 </head> 

36 <body> 

37 <div id= "div1"> </div> 
38 <div id= "div2"> </div> 
39 <div id= "div3"> </div> 
40 </body> 

41 </html> 


代码 运行 如 图 7-5-2 所 示 。 

说 明 : 

z-index 属性 设置 元 素 的 堆 秋 顺序。 拥有 更 高 堆 全 顺序 的 元 素 总 是 会 处 于 堆 秋 顺序 较 
低 的 元 素 的 前 面 。 
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7-5-2 div HŠ 


元 素 可 拥有 负 的 z-index 属性 值 ,为 负 值 的 时 候 作为 页 面 正文 背景 显示 。 
z-index 仅 能 在 定位 元 素 上 奏效 (例如 position:absolute;)。 


总 结 


名 为 了 方便 进行 样式 表 的 验证 ,可 以 直接 在 网 页 上 进行 验证 。 

名 XHTML 表现 方式 与 超 文 本 标记 语言 (HTML) 类 似 , 不 过 语法 上 更 加 严格 。 

忌 页 面 上 一 个 元 素 即 是 一 个 盒子 ,由 内 容 ,间隙 ,边框 和 边 距 组 成 。 

z margin 属性 用 来 描述 元 素 的 外 边 距 ,border 属性 用 来 描述 元 素 的 边框 ,而 padding 
属性 则 是 描述 元 素 的 内 容 与 边框 之 间 的 间隙 。 

马 描 述 元 素 内 容 的 尺寸 时 ,需要 使 用 width 和 height 属性 。 

< position 属性 可 以 用 来 描述 元 素 的 定位 方式 ,默认 为 static, 其 他 定位 的 方式 还 有 
absolute( 绝 对 定位 ) ,relative( 相 对 定位 ) 和 fixed( 固 定 定位 ) 。 

名 多 个 元 素 的 层 倒 关系 可 以 用 z-index 属性 来 描述 。 


课 后 作业 


(1) 在 网 页 中 显示 3 个 div 层 和 显示 ,对 应 的 背景 色 分 别 为 红 、 绿 、 蓝 ,如 下 图 所 示 。 
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(2) 在 网 页 中 实现 圆 角 和 矩形 的 样式 ,如 下 图 所 示 。 


提示 : 

圆 角 矩形 样式 可 以 使 用 图 片 来 实现 ,分 为 有 圆 角 图 片 和 无 圆 角 图 片 ,其 设计 的 原理 源 于 
九宫 格 技术 。 分 别 在 4 个 DIV 中 的 左上 、 右 上 、 左 下 和 右 下 4 个 位 置 设置 图 片 。 最 后 在 中 
间 放 入 内 容 即 可 。 

(3) 在 浏览 网 页 时 ,看 到 有 很 多 图 片 展示 效果 。 通 常 在 一 张 图 片 下 面 有 一 段 说 明文 字 ， 
这 是 对 这 张 图 片 内 容 的 详细 介绍 。 这 种 形式 在 购物 网 站 是 非常 多 见 的 ,使 用 CSS 样式 实现 
购物 网 物品 展示 效果 ,如 下 图 所 示 。 





市 场 价 :150.00 市 场 价 :60.00 市 场 价 :220. 00 市 场 价 :175. 00 
购买 价 :122,00 购买 价 :42.00 购买 价 :185 00 购买 价 :143 00 

° r E 

f md di 

me s SA 

A O 

us u 

市 场 价 :184.00 市 场 价 :190.00 市 场 价 :130.00 市 场 价 :230, 00 
购买 从 :142. 00 购买 价 :178.00 购买 价 :102. 00 购买 价 :192.00 


提示 : 

可 以 使 用 无 序列 表 来 显示 图 片 和 文字 内 容 。 其 中 每 一 个 元 素 都 由 3 个 内 容 组 成 : 图 
片 .标题 文字 和 两 种 价格 。 我 们 将 三 者 都 放 入 <a > 标签 中 , 当 鼠 标 移 上 去 时 , 均 可 以 单 击 ,而 
把 < a > 元 素 置 和 人 < li > 标签 中 即 可 。 


全 Ar c == 
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CSS 实 现 盟 型 布局 





名 理解 浮动 和 清除 浮动 
所 掌握 典型 布局 ,特别 是 多 行 多 列 式 布 局 
名 掌握 典型 的 局 部 布局 


ETT 
请 在 预习 时 学 会 下 列 单词 的 含义 和 发 音 , 并 填写 在 横 线 处 。 
1. float; 


< 





2. clear; 





通过 前 面 几 章 的 介绍 ,已 经 可 以 使 用 CSS 做 出 一 些 漂亮 的 网 页 了 ,现在 还 要 补充 一 点 


知识 ,然后 实现 一 些 CSS 的 典型 布局 。 


8.1 浮动 


在 传统 的 表格 布局 中 ,我 们 对 表格 应 用 对 齐 方式 实现 了 对 整体 布局 的 应 用 ,而 运用 
Web 标准 构建 网 页 以 后 ,float( 浮 动 ) 属 性 是 布局 中 非常 重要 的 属性 ,我 们 常常 通过 对 div 元 
素 应 用 float( 浮 动 ) 来 进行 布局 ,不 但 对 整个 版 式 进行 规划 ,也 可 以 对 一 些 基 本 元 素 如 导航 


等 进行 排列 。 
< div > 属于 块 级 标签 ,具有 “换行 的 特点 ”, 如 以 下 代码 : 





1 <!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 

a "http://www. w3. org/TR/xhtml1/DTD/xhtml1 — strict. dtd"> 
3 <html> 

4 <head> 

5 <title> 未 使 用 浮动 的 DIV</title> 


144 使 


























HTML 和 CSS 开 发 Web 网 站 

6 < style type = "text/css"> 

7 #divi{ 

8 background — color: red; 
9 width:150px; 

10 height :60px; 

11 } 

32 # div2( 

13 background — color: yellow; 
14 width:200px; 

35 height:100px; 

16 ) 

17 # div3( 

18 background - color:blue; 
19 width:180px; 

20 height:100px; 

zi } 

22 #div4{ 

23 background — color : pink; 
24 width:250px; 

25 height :50px; 

26 } 

27 </style> 

28 </head> 

29 

30 < body> 

31 <div id= "div1"></div > 

32 <div id= "div2"></div> 

33 <div id= "div3"></div> 

34 <div id= "div4"></div > 

35 </body> 

36 </html> 


代码 运行 如 图 8-1-1 所 示 。 











动 的 DIV 




















n x m 





图 8-1-1 未 使 用 浮动 的 div 会 自动 换行 
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现在 改变 一 下 代码 ,给 第 二 个 和 第 三 个 < div > 设置 向 右 浮动 ,下 面 是 < style > 内 的 样式 


代码 。 


例 8-1-1 使 用 浮动 后 的 效果 


23 
24 </style> 


< style type = "text/css"> 


#divi{ 


) 


background - color: red; 
width:150px; 
height :60px; 


# div2( 


} 


background - color: yellow; 
width:200px; 

height :100px; 
float:right; 


#div3{ 


F 


background - color:blue; 
width:180px; 

height :100px; 
float:right; 


#div4{ 


background - color: pink; 
width:250px; 
height :50px; 


再 次 运行 后 ,效果 如 图 8-1-2 所 示 。 


























图 8-1-2 使 用 浮动 后 的 效果 
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页 面 布局 时 ,对 于 各 块 的 位 置 不 需要 额外 设置 , 即 不 需要 通过 设置 各 块 的 横向 或 纵向 坐 
标 来 确定 各 块 的 位 置 ,原因 是 Web 页 面 默 认 采 用 常规 文档 流 的 方式 自动 排列 各 元 素 , 即 根 
据 各 元 素 在 HTML 文档 中 出 现 的 先后 顺序 ,采用 从 上 往 下 、 从 左 往 右 的 方式 自动 排列 ; 对 





容 将 跟随 浏览 器 窗口 的 大 小 自动 调节 。 
现在 来 介绍 一 下 浮动 的 一 些 基 本 特点 。 
1. 块 级 元 素 设置 浮动 后 将 失去 "独占 一 行 " 的 特征 


于 块 级 元 素 则 换行 。 对 于 行 级 元 素 , 按 行 逐一 显示 ,这 种 定位 机 制 的 好 处 是 : Web 页 面 的 内 


如 上 个 例子 所 示 ,第 二 个 和 第 三 个 < div > 设置 了 浮动 之 后 ,失去 了 “独占 一 行 ”的 特征 ， 
然后 脱离 常规 文档 流向 右 移动 ,第 二 块 直到 父 容 器 即 页 面 窗口 才 停止 ,第 三 块 直到 前 一 个 浮 


动 元 素 才 停止 。 


为 什么 第 二 块 没有 上 浮 到 第 一 块 的 右 侧 呢 ? 这 是 因为 : 假定 A 元 素 设置 了 浮动 , 则 根 


据 它 的 前 一 个 元 素 是 否 也 设置 了 浮动 分 为 两 种 情况 : 


所 如 果 前 一 个 元 素 也 设置 了 浮动 而 脱离 了 文档 流 ,那么 A 元 素 将 上 淫 到 前 一 个 元 素 同 
一 行 的 后 侧 (靠近 页 面 的 边界 为 前 ,远离 页 面 的 边界 为 后 。 对 于 向 左 浮动 ,就 是 位 于 


前 一 个 元 素 的 右边 ; 对 于 向 右 浮动 ,就 是 位 于 前 一 个 元 素 的 左边 。) 


避 如 果 前 一 个 元 素 没有 设置 浮动 仍然 位 于 文档 流 中 ,那么 A 元 素 将 在 前 一 个 元 素 的 下 


方 显示 (A 元 素 的 顶 边 界 与 前 一 个 元 素 的 底 边界 平 齐 ) 。 
2. 浮动 元 素 将 紧 贴 上 一 个 浮动 元 素 ( 同 方向 ) 或 父 元 素 边 框 ,如 果 宽 度 不 够 则 换行 


现在 缩小 浏览 器 的 宽度 ,还 将 发 现 第 三 个 < div > 被 挤 到 第 二 个 < div > 的 下 面 ,如 图 8-1-3 


所 示 。 这 是 因为 第 二 个 < div > 左边 的 宽度 不 够 容纳 第 三 个 < div >, 所 以 进行 了 换行 显示 。 


D [= J| E) FAshil.html ~ ó x || @ 合用 浮 动 之 后 的 DIV 























图 8-1-3 宽度 不 够 自动 换行 
3. 浮动 元 素 将 占据 行内 元 素 的 空间 


现在 再 来 做 一 个 实验 ,在 第 三 个 < div > 和 第 四 个 < div > 之 间 加 入 一 些 文本 内 容 , 对 应 代 


码 如 下 : 
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<div id= "div3"></div> 

CSS 样式 之 元 素 浮动 CSS 样式 之 元 素 浮动 CSS 样式 之 元 素 浮动 CSS 样式 之 元 素 浮动 css 样式 之 
元 素 浮动 CSS 样式 之 元 素 浮动 CSS 样式 之 元 素 浮 动 CSS 样式 之 元 素 浮 动 CSS 样式 之 元 素 浮动 
CSS 样式 之 元 素 浮动 


<div id= "div4"></div> 


auae wb Pp 


然后 重新 运行 代码 ,效果 如 图 8-1-4 所 示 。 














CSS 样 式 之 元 素 浮动 CSS 

样式 之 元 素 冬 动 CSS 样 式 

之 元 素 浮动 CSS 样 式 之 元 

素 浮动 CSS 样 式 之 元 素 译 

动 CSS 样 式 之 元 素 浮动 

CSS 样 式 之 元 素 浮动 CSS 

Peor 








图 8-1-4 浮动 元 素 占 据 行内 元 素 空间 


浮动 元 素 变 为 特殊 的 行内 元 素 之 后 ,将 占据 行内 元 素 的 空间 ,行内 元 素 只 能 在 剩余 空间 
进行 排列 显示 ,所 以 出 现 了 “文本 围绕 "效果 。 


8.2 ”清除 浮动 


如 图 8-1-3 所 示 ,浮动 元 素 将 根据 浏览 器 窗口 剩余 的 宽度 ,决定 是 否 换行 。 在 实际 的 页 
面 布局 应 用 中 ,有 时 需要 强制 换行 显示 ,避免 影响 页 面 效果 ,这 时 就 需要 使 用 clear( 清 除 ) 
属性 。 

clear( 清 除 ) 属 性 表示 和 前 一 个 浮动 元 素 换行 区 隔 开 ,只 对 块 级 元 素 有 效 。clear 属性 的 
值 可 以 是 left, right, both 或 none。 原 则 是 这 样 的 : 如 果 一 个 盒子 的 clear 属性 被 设 为 
both ,那么 该 盒子 的 上 边 距 将 始终 处 于 前 面 的 浮动 盒子 (如 果 存 在 ) 的 下 边 距 之 下 。 常 用 的 
属性 如 表 8-2-1 所 示 。 
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表 8-2-1 chear 属性 的 常用 取 值 

















属 性 取 f 描 述 
left 在 左 侧 不 允许 有 浮动 元 素 
right 在 右 侧 不 允许 有 浮动 元 素 
both 在 左右 两 侧 都 不 允许 有 浮动 元 素 
none 默认 值 , 两 侧 都 允许 有 浮动 元 素 











如 上 面 例子 所 示 ,假设 出 于 某 种 需要 ,我 们 希望 第 二 块 < div > 仍然 出 现在 第 一 块 < div > 
的 下 方 , 就 像 第 一 块 没 有 设置 浮动 ,而 仅仅 为 第 二 块 设置 左 浮动 那样 。 

这 个 需求 实际 上 可 以 这 样 描述 : 对 于 第 二 块 < div > 而 言 , 它 的 左 侧 不 需要 存在 其 他 的 
浮动 元 素 。 

例 8-2-1 清除 向 左 浮动 


1 <!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
2 "http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
3 <html> 

4 <head> 

5 <title > 清除 浮动 </title> 

6 < style type = "text/css"> 

7 #divi{ 

8 background - color: red; 

9 width:150px; 

10 height :60px; 

11 float:left; 

12 ) 

13 #div2{ 

14 background - color: yellow; 
15 width:200px; 

16 height :100px; 

17 float:left; 

18 clear:left; 

19 } 

20 </style> 

21 </head> 

22 < body> 

23 <div id= "divl"></div> 

24 <div id= "div2"></div > 

25 </body> 

26 </html> 


代码 运行 如 图 8-2-1 所 示 。 

在 第 二 块 < div> 上 设置 了 清除 左 侧 浮动 .也 就 是 说 它 的 左 侧 不 能 存在 着 浮动 元 素 , 这 样 
导致 它 自己 换行 显示 以 满足 这 一 规则 。 

以 下 代码 演示 了 清除 右 侧 浮动 的 场景 。 
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图 8-2-1 清除 向 左 浮动 
例 8-2-2 ”清除 向 右 浮动 





1 <!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
A "http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
3 <html> 

4 < head> 

3 <title> 清 除 向 右 浮动 </title> 

6 < style type = "text/css"> 

7 #divi{ 

8 background - color: red; 

9 width:180px; 

10 height :80px; 

11 float:right; 

12 k 

13 #div2{ 

14 background - color: yellow; 
15 width:220px; 

16 height :50px; 

17 float:right; 

18 clear:right; 

19 } 

20 #div3{ 

21 background - color:blue; 
22 width:180px; 

23 height:100px; 

24 float:right; 

25 ) 

26 </style> 

27 </head> 

28 <body> 

29 <div id= "divl"> 第 一 块 </div> 

30 <div id= "div2"> 第 二 块 </div> 

31 <div id= "div3"> 第 三 块 </div> 
32 </body> 


33 </html> 
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代码 运行 如 图 8-2-2 所 示 。 





图 8-2-2 清除 向 右 浮动 


由 于 第 二 块 < div > 清除 了 向 右 浮 动 , 也 就 是 说 它 的 右 侧 不 能 有 浮动 元 素 , 所 以 它 自 己 不 
得 不 主动 换行 来 满足 这 一 规则 。 


8.3 ”实现 典型 布局 


到 目前 为 止 ,CSS 方面 我 们 已 经 学 习 了 样式 的 基本 语法 、 常 用 的 CSS 页 面 修饰 .三 类 样 
式 的 应 用 方式 及 优先 级 、 盒 状 模型 浮动 ,等 等 。 通 过 对 这 些 技能 的 综合 应 用 ,我 们 可 以 实现 
页 面 的 整体 布局 ,类 似 于 报纸 的 排版 。 下 面 先 介绍 这 些 版 面 的 整体 规划 。 

8.3.1 一 列 式 布局 

- 列 式 布局 是 最 简单 的 布局 方式 ,是 所 有 布局 的 基础 。 如 下 面 代 码 所 示 , 网 页 正文 只 直 
接 包含 一 个 < div>, 网 页 的 内 容 都 放 入 这 个 div 之 内 。 





1 <!DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Strict//EN" 

2 "http://www. w3. org/TR/xhtml1/DTD/xhtm11 — strict. dtd"> 
3 <html> 

4 <head> 

5 <title> 一 列 式 布局 </title> 
6 < style type = "text/css"> 

7 div[ 

8 border:1px solid red; 
9 width:500px; 

10 height :200px; 

11 ) 

12 </style> 

13 </head> 

14 <body> 

15 <div></div> 

16 </body> 

17 </html> 


代码 中 ,对 于 border, height 的 属性 不 是 必须 的 ,设置 这 两 个 属性 是 为 了 方便 观察 结果 。 
实际 上 ,如 果 不 设置 width( 宽 度 ) 属 性 ,div 作为 块 级 元 素 将 占 满 整 行 的 空间 , 即 宽度 是 它 所 
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在 容器 宽度 的 100% ,我 们 也 可 以 设置 宽度 属性 为 百分比 ,此 时 再 改变 浏览 器 窗口 的 宽度 ， 
div 的 宽度 也 会 随 之 改变 。 

如 果 要 让 整个 div 在 屏幕 水 平 居 中 , 则 需要 用 到 margin 属性 ,代码 如 下 : 

例 8-3-1 一 列 式 布局 


Dowaouwmwmb 


= = 
e o 


<! DOCTYPE html PUBLIC "2 — //W3C//DTD XHTML 1.0 Strict//EN" 
"http://www. w3. 0org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
<html> 
< head> 
<title> 一 列 式 布局 </title> 
< style type = "text/css"> 
div{ 
border:1px solid red; 
width:500px; 
height :200px; 
margin:0px auto; 
) 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


代码 运行 如 图 8-3-1 所 示 。 














图 8-3-1 一 列 式 布局 


8.3.2 两 列 式 布局 


两 列 式 布局 适用 于 左 侧 导 航 区 、 右 侧 内 容 区 的 页 面 结构 。 

按照 需求 ,页 面 内 容 包 含 两 个 < div >. H F div 是 块 级 元 素 , 每 个 块 级 元 素 独 占 一 行 ,所 
以 两 个 div 是 从 上 到 下 依次 显示 ,使 用 浮动 可 以 使 元 素 脱离 文档 流 , 从 而 形成 左右 排列 。 在 
实际 应 用 的 两 栏 布局 中 ,一 般 要 求 左 栏 固定 宽度 , 右 栏 宽度 是 根据 浏览 器 窗口 的 宽度 自 适 
应 。 只 要 将 左 栏 的 宽度 设置 为 固定 的 像素 值 , 右 栏 不 设置 宽度 ,也 不 浮动 , 即 可 实现 ,代码 


如 下 : 
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1 <!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
2 "http://www. w3. org/TR/xhtm11 /DTD/xhtm11 — strict. dtd"> 
3 <html> 

4 <head> 

5 <title> 两 列 式 布局 </title> 
6 < style type = "text/css"> 

7 #divi{ 

8 border:1px solid red; 
9 width:200px; 

10 height :200px; 

11 float:left; 

12 ) 

13 #div2{ 

14 border:1px solid red; 
15 height:200px; 

16 } 

17 </style> 

18 </head> 

19 <body> 

20 <div id= "div1"></div> 
21 <div id= "div2"></div> 
22 </body> 

23 </html> 


代码 运行 效果 如 图 8-3-2 所 示 。 











图 8-3-2 两 列 式 布局 


当 改 变 浏览 器 窗口 的 宽度 时 , 左 栏 宽 度 保持 不 变 , 右 栏 的 宽度 随 之 一 起 变化 。 但 有 时 
候 , 我 们 希望 网 页 分 为 左 栏 和 右 栏 这 两 列 ,而 且 是 固定 的 宽度 ,但 它们 作为 一 个 整体 在 浏览 


器 窗口 中 水 平 居中 ,左右 两 侧 留 有 一 定 宽 度 的 空白 。 


这 时 候 可 以 结合 之 前 的 一 列 式 布局 来 进行 设计 : 在 这 两 个 < div > 的 外 围 再 包 庄 一 个 


< div >, 由 后 者 负责 实现 在 浏览 器 窗口 的 水 平 居中 ,而 里 面 的 两 个 div 仍然 使 月 
来 进行 分 栏 ,修改 之 后 的 代码 如 下 所 示 : 


1 <!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 

z "http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
3 <html> 

4 <head> 


日 目前 的 做 法 
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5 <title> 两 列 式 布局 </title> 

6 < style type = "text/css"> 

7 # divlayout( 

8 border:1px dashed blue; 
9 width:500px; 

10 margin:0px auto; 

2i } 

12 #divi{ 

13 border:1px solid red; 
14 width:200px; 

15 height :200px; 

16 float:left; 

17 } 

18 #div2{ 

19 border:1px solid red; 
20 height:200px; 

21 ) 

22 </style> 

23 </head> 

24 <body> 

25 <div id= "divlayout"> 

26 <div id= "div1"></div > 
27 <div id= "div2"></div > 
28 </div> 

29 </body> 

30 </html> 


代码 运行 如 图 8-3-4 所 示 o 


b | 四 | DE x |+ 


9 
Ú 





图 8-3-4 分 栏 且 居中 显示 


8.3.3 三 列 式 布局 


更 为 常见 的 是 三 列 式 布局 ,具体 而 言 就 是 整个 页 面 分 为 左 中 右 3 栏 。 

按 之 前 的 案例 的 做 法 是 使 用 浮动 将 3 个 div 排 成 一 行 , 若 这 样 的 话 , 就 必须 为 中 间 的 第 
二 块 div 设置 一 个 明确 的 宽度 ,否则 不 能 进行 自 适应 宽度 调整 ,但 我 们 可 以 考虑 其 他 的 
方案 。 
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回顾 之 前 学 过 的 定位 属性 ,可 以 使 用 定位 加 浮动 来 解决 这 个 问题 。 如 果 position 属性 
赋值 为 absolute, 将 实现 绝对 定位 。 绝 对 定位 的 元 素 将 从 文档 流 中 脱离 出 来 ,漂浮 在 文档 正 
文 的 上 方 , 就 像 图 层 一 样 。 按 照 这 个 思路 ,首先 设置 最 外 层 的 div 容器 使 用 绝对 定位 ,再 修 
改 里 面 小 块 div 样式 ,设置 它们 也 使 用 绝对 定位 ,一 个 在 左边 ,一 个 在 右边 ,具体 代码 如 下 


所 示 : 


28 
29 
30 


35 
36 
37 





<! DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
"http://www. w3. org/TR/xhtml1/DTD/xhtm11 - strict. dtd"> 
<html> 
<head> 
<title> 三 列 式 布局 </title> 
< style type = "text/css"> 

# divlayout( 
position:absolute; 
border:1px dashed blue; 

width:99 % ; 

} 

#divl, # div2, # contentdiv{ 
border:1px solid red; 
height :200px; 

) 

#divi{ 
position:absolute; 
width:150px; 
float:left; 
left:10px;top:0px; 

) 

# div2( 
position:absolute; 
width:150px; 
float:right; 
right:1l0px;top:0px; 

) 

</style> 
</head> 
<body> 
<div id= "divlayout"> 
<div id= "divl"> divl </div> 
<div id= "contentdiv"> content </div> 
<div id= "div2"> div2 </div> 
</div> 
</body> 
</html> 


代码 运行 如 图 8-3-5 所 示 。 

到 此 已 经 实现 了 左右 两 栏 的 定位 ,但 是 中 间 的 contentdiv 的 宽度 还 是 撑 满 了 整个 父 容 
器 , 即 divlayout, 不 符合 我 们 的 要 求 。 我们 的 目标 是 要 让 中 间 的 contentdiv 宽度 能 够 自 适 
应 ,所 以 也 不 能 够 直接 给 它 设置 宽度 。 这 时 换 一 种 思路 ,只 要 把 它 的 左边 界 和 右边 界 固 定 下 
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图 8-3-5 浮动 加 定位 


来 , 即 国定 中 间 的 contentdiv 的 左右 两 个 角 ,改变 浏览 器 窗口 大 小 ,就 能 对 contentdiv 进行 
拉 伸 了 。 
所 以 要 给 contentdiv 设置 它 的 左右 边 距 ,添加 的 CSS 代码 如 下 所 示 : 


1 # contentdiv( 

2 margin - left :165px; 
zi margin - right :165px; 
s: 


重新 运行 后 ,结果 如 图 8-3-6 所 示 。 


DIRES] x |* CO 





i divl ‘ontent div2 











图 8-3-6 浮动、 定位 加 边 距 


8.3.4 三 行 三 列 式 布局 


结合 上 面 的 内 容 , 可 以 实现 更 为 复杂 的 三 行 三 列 式 布局 。 在 第 二 行 中 实现 上 面 的 三 列 
式 布局 , 先 写 HTML 中 的 代码 ,请 注意 各 个 div 容器 之 间 的 榜 套 关系 ,代码 如 下 : 


<div id= "divLayout"> 
<div id= "divTop"> divTop </div> 
<div id= "divMain"> 
<div id= "divLeft"></div > 
< div id= "divCenter"></div > 
<div id= "divRight"></div > 
</div> 
<div id= "divBottom"> divBottom </div> 
</div> 


`, mo 4 O mnn í wne 
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为 了 避免 内 外 边 距 .字体 大 小 等 属性 在 不 同 浏览 器 之 间 的 默认 值 不 同 带 来 的 困扰 , 先 使 
用 * 号 通配符 选择 器 重新 定义 所 有 的 HTML 标签 的 外 边 距 .内 边 距 和 字号 。 


wf 

margin: 0px; 
padding: 0px; 
font - size:lem; 


i: 


mm & Ó N PD 


现在 为 各 个 div 块 设置 背景 色 ,边框 和 宽度 等 属性 。 代 码 如 下 : 


1 #divLayout{ 

z background - color: # efefef; 
=] border:1px solid gray; 

4 width:960px; 

5 ) 

6 #divTop{ 

7 background - color: # ECD782; 
8 width:100% 

sy 

10 #divMain{ 

H background - color:white; 
2o 

13 #divLeft{ 

14 width:220px; 

15 background - color : red; 

36: 7) 

17 #divCenter{ 

18 width:520px; 

19 background - color:green; 

20 

21 #divRight{ 

22 width:200px; 

23 background - color:blue; 

24 } 

25 #divBottom{ 

26 background - color: # abcdef; 
27 width:100% 

32 J 


代码 运行 如 图 8-3-7 所 示 。 


A e Dp -exjesscness x 





图 8-3-7 设置 基本 属性 (边框 .背景 色 .宽度 ) 
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现在 为 第 二 行 的 三 个 div 设置 向 左 浮动 。 


#divLeft{ 
width:220px; 
background — color: red; 
float:left; 

} 

# divCenter{ 
width:520px; 
background — color:green; 
float:left; 

1; 

# divRight{ 
width:200px; 
background - color:blue; 
float:left; 

h 


此 时 代码 运行 结果 如 图 8-3-8 所 示 。 





图 8-3-8 设置 向 左 浮动 


注意 到 divMain 包含 的 3 个 div 总 宽度 并 不 足以 撑 满 父 容器 的 宽度 ,这 是 因为 我 们 打 
算 在 3 个 div 之 间 留 一 点 空 险 。 修 改 divCenter 的 边 距 即 可 ,代码 如 下 : 


T 
2 
3 
4 
5 
6 


# divCenter( 
width:520px; 
background - color : green; 
float:left; 
margin:0px 9px; 
} 


最 后 给 这 些 div 设置 高 度 模拟 最 终 效果 ,完整 代码 如 下 : 


onou Q ` 


<!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1. 0 Strict//EN" 
"http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
<html> 
<head> 
<title> 三 列 式 布 局 </title> 
< style type = "text/css"> 
*{ 
margin: 0px; 
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9 padding: 0px; 

10 font — size:lem; 

11 ) 

12 # divLayout ( 

13 background - color: # efefef; 
14 border:1px solid gray; 

15 width:960px; 

16 margin: 0px auto; 

17 } 

18 # divTop{ 

19 background - color: # ECD782; 
20 width:100 % ; 

21 height :50px; 

22 ) 

23 #divMain{ 

24 background - color:white; 

25 height :350px; 

26 $ 

27 #divLeft{ 

28 width:220px; 

29 background - color : red; 

30 float:left; 

31 height:100 % ; 

32 } 

33 # divCenter{ 

34 width:520px; 

35 background - color : green; 

36 float:left; 

37 margin:0px 9px; 

38 height:100 % ; 

39 } 

40 # divRight 

41 width:200px; 

42 background - color:blue; 

43 float:left; 

44 height:100 $ ; 

45 } 

46 # divBottom{ 

47 background - color: # abcdef ; 
48 width:100 % ; 

49 height :80px; 

50 } 

51 </style> 

52 </head> 

53 <body> 

54 <div id= "divLayout"> 

55 < div id= "divTop"> divTop </div > 
56 <div id= "divMain"> 

57 <div id= "divLeft"></div > 


58 <div id= "divCenter"></div > 
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* 
59 <div id= "divRight"></div> 
60 </div> 
61 < div id= "divBottom"> divBottom </div > 
62 </div> 
63 </body> 
64 </html> 


代码 运行 结果 如 图 8-3-9 所 示 。 





























图 8-3-9 ”设置 边 距 和 高 度 


8.4 ”典型 的 局 部 布局 


目前 已 经 完成 了 版 面 的 整体 规划 ,但 是 各 板块 内 部 的 具体 结构 ,特别 是 对 于 某 些 复杂 的 
版 块 还 需 进 一 步 规划 , 即 局 部 布局 ,下 面 将 介绍 如 何 使 用 DIV 十 CSS 实现 页 面 的 局 部 布局 。 


8.4.1 div-ul-li 局 部 布局 
例如 ,假设 要 实现 图 8-4-1 这 种 局 部 效果 : 
W ps d neo @ MaR O WE wa [um 
图 8-4-1 div-ul-li 实现 顶部 菜单 


先 对 HTML 内 容 结构 进行 分 析 : 
多 项 菜单 并 列 显示 , 且 不 存在 父子 或 包含 关系 ,从 语义 角度 应 采用 div-ulli 实现 。 
图 标 和 文字 要 求 有 一 定 的 间隔 ,图 标 仅 为 修饰 作用 ,从 语义 角度 应 将 图 标 作为 背景 修饰 
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而 不 是 内 容 , 另 外 ,文字 和 图 标 各 占 一 个 <1i>( 图 标的 <1i > 内容 为 空 ) ,方便 设置 间隔 。 

对 CSS 样式 修饰 分 析 如 下 : 时 & @ > ? 

(1) 多 个 小 图 标 , 使 用 背景 图 的 偏 移 技 术 , 如 图 8-4-2 AA 2 
所 示 。 

(2) 浮动 ,整体 居 右 , 则 < div > 容器 右 浮动 ,图 标 及 菜单 ”图 84-2 小 图 的 集合 -背景 偏 移 
文字 左 浮 动 。 

(3) 调整 宽 高 及 边框 属性 实现 实际 效果 。 

首先 编写 HTML 代码 ,建立 标签 组 织 结构 ,为 各 标签 增加 类 名 以 区 分 。 


1 <div class = "top_menu"> 

2 <ul> 

a <li class = "pic1"></1i> < li class = "text"> 购 物 车 </1i> 

4 < li class = "pic2"></1i> < li class = "text"> 帮 助 中 心 </1i> 
5 < li class = "pic3"></1i> < li class = "text"> 加 入 收藏 </1i> 
6 < li class = "pic4"></li> < li class = "text"> 设 为 首页 </1i> 
7 <li class = "btn"> 登 录 </1i> 

8 <1iclass= "btn"> 注 册 </1i> 

9 </ul> 

10 </div> 


现在 来 设置 CSS 样式 ,给 文字 加 上 < a > 标签 在 这 里 就 不 再 介绍 了 。 先 让 <1i> 向 左 浮 
动 , 并 取消 列表 样式 。 


1 .top menu{float:right;} 
2 .top menu ul{list— style:none;} 
3 .top menu ul li(float:left) 


然后 设置 布局 各 块 大 小 ,统一 高 度 为 26 像素 ,小 图 标 宽 为 28 像素 ,登录 注册 宽度 为 38 
像素 。 


1 .picl{width:28px; height:26px; 

2 background: url( images/bg. gif) no- repeat; 

3 ) 

4 .pic2(width:28px; height:26px; 

5 background:ur1( images/bg. gif) no- repeat 一 28px 0px; 
人 

7 /x pic3 和 pic4 省 略 */ 

8 .btn{width:38px; height:26px; 

9 background:url( images/bg. gif) no- repeat 0px — 26px; 
10 } 


使 用 背景 偏 移 之 后 ,来 设置 文字 大 小 及 菜单 文字 间 填 充 。 


1 .top_menu ul li a{font:12px/26px 宋体 } 
2 .text{ 

3 padding: 0px 5px; 

4 text- align:center; 
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.btn{ 
padding: 0px 5px; 
text- align:center; 


oono u 


} 


在 以 上 代码 中 ,背景 偏 移 的 部 分 里 有 很 多 相似 的 样式 代码 ,除了 偏 移 量 外 ,其 他 完全 一 
致 。 可 以 把 这 些 共同 特征 单独 提取 出 来 作为 一 个 类 ,例如 pic, 然 后 再 具体 设置 其 他 图 标的 
独特 样式 ,这 样 可 以 提高 代码 的 复 用 性 并 方便 维护 。 

对 应 的 CSS 代码 修改 为 : 


.pic{ 
width:28px; 
height :26px; 
background:url( images/bg. gif) no- repeat; 


.pic2( 

background - position: 一 28px 0px; 
i; 

.pic3{ 

background - position: 一 84px 0px; 


1 
2 
3 
4 
5 } 
6 
7 
8 
9 


.pic4{ 
background - position: — 112px 0px; 
} 


在 HTML 代码 中 应 用 样式 时 ,需要 同时 应 用 到 两 种 类 样式 ,对 应 的 HTML 代码 修 
改 为 : 


< li class = "pic pic1"></1i> 
< li class = "pic pic2"></1i> 
< li class = "pic pic3"></1i> 
< li class = "pic pic4"></li> 


& Q N PP 


在 div-ul-li 的 结构 中 ,< ul > 存在 默认 左右 外 边 距 ,< li >R K list-style 属性 有 值 时 存 
在 默认 的 缩 进 。 应 在 布局 前 在 CSS 顶端 先 设 置 内 外 边 距 为 0 像 ea 
素 ,以 及 list-style:none, 这 点 在 布局 中 非常 重要 ,有 利于 写 出 同时 
兼容 多 种 浏览 器 的 样式 代码 ,而 不 需要 针对 某 个 浏览 器 进行 修改 。 


h 
8.4.2 div-dl-dt-ad 局 部 布局 = asarana 


| m 大 区 王 隆 价 ， 三 折 直 法 


mamn, ROTE 


典型 的 局 部 布局 还 有 网 上 常见 的 图 文 混 编 结构 ,如 图 8-4-3 所 | 
示 , 图 片 和 文字 显然 存在 父子 或 包含 关系 ,文字 是 对 商品 图 片 的 具 ”二 erm. erze 
体 说 明 , 即 可 以 把 图 片 看 作 “ 标 题 ", 将 后 续 的 多 行文 字 看 成 “具体 
的 描述 "。 因 此 ,采用 div-dl-dt-dd 结构 进行 描述 ,类 似 的 结构 还 有 图 8 4 3 giv aidedd 实现 
多 层次 嵌 套 的 二 级 或 三 级 菜单 等 。 图 文 混纺 
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思路 分 析 : 

(1) 本 例 的 图 文 混 编 结 构 , 图 片 和 文字 关系 密切 ,采用 div-dl-dt-dd 结构 描述 。 

(2) 每 行 的 图 文 结构 都 对 应 一 个 dl-dt-dd 结构 ,易于 扩展 。 

(3) 根据 图 片 和 文字 的 关系 ,本 例 <dt> 放 图 片 ,<dd> 放 文字 ,<dl> 作 为 结构 容器 。 
对 CSS 样式 修饰 分 析 如 下 : 

(1) 浮动 : <dd> 内 的 文字 和 <dt> 内 的 图 片 排列 在 同一 行 ,所 以 应 设置 <dt> 左 浮动 。 
(2) 调整 <dd> 宽 高 与 行 高 实现 文字 垂直 居中 ,用 盒子 属性 修饰 出 实际 效果 。 
首先 还 是 编写 HTML 代码 ,代码 如 下 : 


1 <div id= "right"> 

2 <d1> 

3 < dt >< img src = "images/show1. jpg" alt = "alt" /></dt > 
4 <dd><ahref=" 井 "> 大 牌 狂 降价 ,三 折 直 送 </a></dd> 

5 </d1> 

6 <dl> 

z <dt>< img src = "images/show2. jpg" alt = "alt" /></dt > 
8 <dd><a href = " # "> 大 学 要 求 老 师 开 网 店 </a></dd> 

9 </d1> 

10 <dl> 

11 < dt >< img src = "images/show3. jpg" alt = "alt" /></dt > 
32 <dd><a href ="#"> 黑 眼圈 推荐 ,美白 不 停 </a></dd> 

13 </dl> 

14 <dl> 

15 < dt >< img src = "images/show4. jpg" alt = "alt" /></dt > 
16 <dd><a href = " # "> 瘦身 狂潮 风 , 修 形 之 选 </a></dd> 
17 </dl> 


18 </div> 


现在 开始 编写 CSS 样式 ,规划 < div > 块 的 宽 高 以 及 < dt > 的 浮动 ,并 且 设 置 < dt > 的 高 度 
dd > 的 行 高 一 致 ,以 实现 单行 文字 的 垂直 居中 。 


#right{ 

width:250px; 
height :270px; 
padding - top: 32px; 


y 

2 

3 

4 

s E i 
6 #rightdldt{ 

7 float:left; 
8 width:80px; 
9 height :60px; 
QQ J 

11 #right dl dd{ 

12 width:190px; 

















第 8 章 ”CSS 实 现 典型 布局 











| line- height:60px; 
14 } 


设置 好 浮动 . 宽 高 和 垂直 居中 后 ,再 为 左边 图 片 设置 宽 高 和 修饰 边框 ,图 片 水 平 及 垂直 
居中 ,还 有 文字 垂直 居中 。 





£ # right dl dt{ 

2 text - align:center; 

3 padding: 2px 0px; 

a 

5 #right dl dt img{ 

6 width:60px; 

3 height :47px; 

8 border:1px solid # 9ea0a2; 
9 vertical - align:middle; 
10 J 


在 div-dl-dt-dd 结构 中 ,< dl > 存在 默认 上 下 外 边 距 ,< dd > 标签 存在 默认 的 左 外 边 距 。 
应 在 布局 前 在 CSS 顶端 先 设置 dl,dd{tmargin:0px,padding 0px;) ,有 利于 写 出 同时 兼容 多 
种 浏览 器 的 样式 代码 ,而 不 需要 针对 某 个 浏览 器 进行 修改 。 
通过 前 面 示例 的 学 习 , 用 到 了 各 种 CSS 选择 器 相关 的 常用 符号 ,如 *. "为 类 名 标识 符 ， 
“HORR ID 标识 符 等 。 多 选择 器 的 常用 符号 及 组 合 如 表 8-4-1 所 示 。 
表 8-4-1 多 选择 器 的 常用 符号 及 组 合 









































符号 x m fP 描 æ 
空格 div ul{list-style: none; } < div > 内 的 < ul > 样式 
， 逗号 div,ul(text-align:center) < div > 和 < ul > 采用 相同 样式 
# id 标识 符 # divTop{width:200px;} id 为 divTop 的 元 素 样 式 
类 标识 符 . pic{background:url(bg. gif) ;} 类 名 为 pic 的 元 素 样式 
: 冒号 a:hover( # ff0} <a> 标 签 的 hover 伪 类 样式 
li. 标签 十 类 li. pic{height: 30px;} 类 名 为 pic 的 <1i> 标 签 样式 
div # 标签 十 id div # nav{ text-align: center} id 为 nav 的 < div > 标签 样式 
#. id 十 空格 十 类 # nav. pic(border:1px;) id 为 nav 元 素 内 的 pic 类 样式 
#., | id 十 空格 十 类 十 逗号 | # nav. pic, # nav. text{width:40px} s. . pic A text 





总 结 


所 浮动 的 元 素 将 脱离 文档 流 ,停靠 在 前 一 个 元 素 的 侧 方 ,float 属性 常用 的 3 个 取 值 为 


left.right.none, 
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名 使 用 clear 属性 可 以 设置 元 素 是 否 清除 浮动 ,常用 的 3 个 取 值 为 left right, none, 

名 典型 布局 中 ,使 用 margin, position 等 属性 可 以 实现 元 素 的 精准 定位 。 合 理 地 使 用 百 
分 比 来 设置 宽度 ,可 以 使 元 素 自动 适应 容器 的 宽度 。 

气 典 型 的 局 部 布局 有 div-ulli 局 部 布局 和 div-dl-dt-dd 局 部 布局 ,经 常会 用 到 
background 里 面 的 偏 移 技 术 。 


课 后 习题 


(1) Æ HTML 中 显示 带 有 蓝 色 实 线 边框 的 两 个 层 ,让 两 个 层 在 同一 列 ,如 下 图 所 示 。 
止 边 的 层 














下 边 的 层 


(2) 在 HTML 中 使 用 层 进 行 布局 , 嵌 套 使 用 无 序列 表 ,显示 行 业 资讯 。 如 下 图 所 示 。 





这 就 是 iPhone 8 的 概念 设计 ?让 E 华为 Pg 或 4 月 6 日 伦敦 亮相 
电 商 茜 机 常见 7 大 陷阱 揭秘 — 1 好 惊叹 ! 乐 2 Pro 配 置 全 曝光 
魅族 全 新 系列 手机 曝光 vivo Xplay5 分 屏 双开 体验 


(3) 使 用 DIV 十 CSS 布局 ,完成 下 图 布局 。 


(4) 模拟 完成 下 图 所 示 网 页 , 当 单 击 “ 数 码 /汽车 时, 下面 对 应 地 显示 数码 汽车 新 闻 , 当 
单 击 “ 手 机 ”时 ,下 面 对 应 地 显示 手机 类 新 闻 。 
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名 熟悉 网 页 制作 工具 Dreamweaver 工作 界面 

Z £ Jt Dreamweaver 中 如 何 进行 站 点 管理 

名 掌握 在 Dreamweaver 中 如 何 创建 和 操作 各 种 网 页 元 素 
Z $E Dreamweaver 中 如 何 操作 表格 和 列表 

名 掌握 在 Dreamweaver 中 如 何 操作 表单 和 表单 元 素 


《< 本 章 单词 
请 在 预习 时 学 会 下 列 单词 的 含义 和 发 音 , 并 填写 在 横 线 处 。 


1. Dreamweaver: 
2. Adobe: 








9.1 Dreamweaver 简介 


Adobe Dreamweaver, 简 称 DW ,中 文 名称 “ 梦 想 编 织 者 ”, 是 美国 Macromedia 公司 开发 
的 集 网 页 制作 和 管理 网 站 于 一 身 的 所 见 即 所 得 网 页 编辑 器 ,DW 是 第 一 套 针 对 专业 网 页 设 
计 师 特别 发 展 的 视觉 化 网 页 开发 工具 ,利用 它 可 以 轻而易举 地 制作 出 跨越 平台 限制 和 跨越 
浏览 器 限制 的 充满 动感 的 网 页 。Adobe 公司 收购 Macromedia 公司 后 ,继续 开展 
Dreamweaver 的 升级 ,目前 它 的 主要 版 本 为 CS4 CS5 .CS5. 5、CS6 等 版 本 。 本 书 以 Adobe 
Dreamweaver CS4 版 本 介绍 Dreamweaver。 


9.1.1 DreamWeaver CS4 的 功能 和 特点 


Adobe Dreamweaver CS4 是 一 款 专 业 的 HTML 编辑 软件 ,用 于 对 Web 站 点 、Web 网 
页 和 Web 应 用 程序 的 设计 ,编码 和 开发 。 无 论 是 喜欢 直接 编写 HTML 代码 还 是 偏爱 在 可 
视 化 编辑 环境 中 工作 ,Dreamweaver 都 会 提供 众多 工具 ,丰富 用 户 的 Web 创作 体验 。 
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利用 Dreamweaver 中 的 可 视 化 编辑 功能 .可 以 快速 地 创建 页 面 而 无 须 编写 任何 代码 。 
不 过 ,如 果 您 更 喜欢 用 手工 直接 编码 ,Dreamweaver 还 包括 许多 与 编码 相关 的 工具 和 功能 。 
并 且 , 借 助 Dreamweaver, 还 可 以 使 用 服务 器 语言 (例如 ASP, ASP. NET,JSP 和 PHP) 生 成 
支持 动态 数据 库 的 Web 应 用 程序 。 

9.1.2 Dreamweaver CS4 的 工作 界面 

Dreamweaver CS4 的 工作 界面 与 Dreamweaver 以 前 版 本 有 所 差别 ,主要 由 菜单 栏 文 
档 工具 栏 编辑 区 状态 栏 . 属 性 检查 器 ,面板 组 等 部 分 组 成 ,而 插入 栏 则 整合 在 面板 组 中 ,如 
图 9-1-1 所 示 。 








CT 
xo mo se Mp saw s 


























图 9-1-1 工作 界面 


1. &3 

菜单 栏 主要 包括 “文件 “编辑 “查看 “插入 ”修改 “格式 “命令 “站 点 ”窗口 “帮助 ” 
等 菜单 。 单 击 菜单 栏 中 的 命令 ,在 弹出 的 下 拉 菜 单 中 选择 要 执行 的 命令 ,如 图 9-1-2 所 示 。 

2. 插入 栏 

“插入 ”工具 栏 在 之 前 的 版 本 均 在 菜单 栏 下 方 ,CS4 版 本 将 其 整合 在 右 部 面板 组 中 ,使 用 
起 来 更 为 灵活 方便 ,插入 栏 按 以 下 的 类 别 进行 组 织 : 

“常用 ”类 别 可 以 创建 和 插入 最 常用 的 对 象 .例如 图 像 和 Flash 等 。 

“布局 ”类 别 主 要 用 于 网 页 布局 ,可 以 插入 表格 .div 标签 . 层 和 框架 。 

“表单 类别 包含 用 于 创建 表单 和 插入 表单 元 素 的 按钮 。 

“数据 ?类 别 可 以 插入 Spry 数据 对 象 和 其 他 动态 元 素 ,例如 记录 集 、 重 复 区 域 . 显 示 区 域 
以 及 插入 记录 和 更 新 记录 等 。 

“Spry” 类 别 包含 一 些 用 于 构建 Spry 页 面 的 按钮 ,例如 Spry XAH, Spry 菜单 栏 等 。 

“文本 ?类 别 可 以 插入 各 种 文本 格式 设置 标签 和 列表 格式 设置 标签 。 

“收藏 夹 ?类 别 可 以 将 插入 栏 中 最 常用 的 按钮 分 组 和 组 织 到 某 一 常用 位 置 。 

3. 文档 工具 栏 

文档 工具 栏 中 包含 一 些 按钮 可 以 在 文档 的 不 同 视图 间 快 速 切换 ,例如 :“ 代 码 ? 视 图 、 
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图 9-1-2 菜单 栏 中 的 “插入 ”选项 


“设计 ”视图 、 同 时 显示 “代码 ”和 “设计 ”视图 的 拆 分 视图 。 文 档 工 具 栏 中 还 包含 一 些 与 查看 
文档 在 本 地 和 远程 站 点 间 传 输 文档 有 关 的 常用 命令 和 选项 ,如 :“ 在 浏览 器 中 预览 /调试 ” 
“文件 管理 “验证 标记 “检查 浏览 器 兼容 性 ”等 。 

注意 

单 击 “ 查 看 ”1“ 工 具 栏 ”1 “文档 ”命令 菜单 ,就 会 在 Dreamweaver CS4 中 显示 文档 工具 
栏 。 若 去 掉 “ 文 档 ” 选 项 前 的 对 色 , 就 可 以 隐藏 文档 工具 栏 。 

4. 状态 栏 

状态 栏 提供 与 您 正 创建 的 文档 有 关 的 其 他 信息 。 其 中 “标签 选择 器 "显示 环绕 当前 选 定 
内 容 的 标签 的 层次 结构 。 单 击 该 层次 结构 中 的 任何 标签 以 选择 该 标签 及 其 全 部 内 容 。 例 
如 : 单 击 < body > 可 以 选择 文档 的 整个 正文 “缩放 工具 ”可 以 设置 当前 页 面 的 缩放 比率 。 
“窗口 大 小 ?用 来 将 “文档 ”窗口 的 大 小 调整 到 预定 义 或 自 定义 的 尺寸 。 状 态 栏 最 右 侧 显示 当 
前 页 面 的 文档 大 小 和 估计 下 载 时 间 。 

5. 面板 组 

Dreamweaver CS4 将 各 种 工具 面板 集成 到 面板 组 中 ,包括 插入 面板 \ 行 为 面板 、 框 架 面 
板 、 文 件 面板 .CSS 样式 面板 、 历 史 面 板 等 。 用 户 可 根据 自己 的 需要 ,选择 隐 茂 和 显示 面板 。 
单 击 菜单 栏 < 窗口 ”命令 ,在 下 拉 菜 单 中 选择 “历史 记录 ”, 将 展开 历史 面板 。 


9.2 站 点 的 创建 与 管理 


对 于 制作 维护 一 个 网 站 ,首先 需要 在 本 地 磁盘 上 制作 修改 网 站 的 文件 ,然后 把 这 个 网 站 
制作 修改 的 文件 上 传 到 互联 网 的 Web 服务 器 上 ,从 而 实现 网 站 文件 的 更 新 。 放 置 在 本 地 磁 
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盘 上 的 网 站 称 为 本 地 站 点 ,位 于 互联 网 Web 服务 器 里 的 网 站 称 为 远程 站 点 。Dreamweaver 
提供 了 对 本 地 站 点 和 远程 站 点 强大 的 管理 功能 。 

Dreamweaver 站 点 是 指 在 Dreamweaver 制作 设计 网 页 的 过 程 中 所 使 用 的 术语 ,是 定义 
一 个 站 点 名 称 、 存 放 文 件 的 文件 夹 , 并 可 以 方便 远程 管理 维护 网 站 的 功能 。 使 用 
Dreamweaver 站 点 管理 ,需要 理解 以 下 3 种 站 点 的 定义 。 

1. 本 地 信息 

本 地 信息 是 本 地 工作 目录 ,也 称 为 “本 地 站 点 ”。 

2. 远程 信息 

远程 信息 是 远程 服务 器 存储 文件 的 位 置 , 也 称 为 “远程 站 点 ”, 一 般 是 指向 使 用 运行 系统 
正在 运行 的 站 点 。 

3. 测试 服务 器 

测试 服务 器 是 用 来 测试 站 点 的 服务 器 ,在 测试 服务 器 中 测试 通过 后 ,再 发 布 到 远程 站 
点 上 。 
了 解 了 这 些 , 基 本 工作 已 经 就 绪 , 下 面 将 以 Dreamweaver CS4 为 例 介 绍 Dreamweaver 
站 点 管理 的 基本 操作 。 


9.2.1 新 建站 点 


在 Dreamweaver 中 可 以 有 效 地 建立 并 管理 多 个 站 点 。 搭 建站 点 可 以 有 两 种 方法 : 一 是 
使 用 “站 点 定义 向 导 ”, 这 可 以 根据 提示 逐步 完成 设置 过 程 ; 二 是 使 用 "高 级 ”设置 来 完成 ,可 
以 根据 需要 分 别 设置 本 地 信息 、 远 程 信息 和 测试 服务 器 。 

单 击 “ 新 建 ” 一 “站点”, 出 现 站 点 定义 对 话 框 , 单 击 对 话 框 中 的 “基本 ”选项 卡 以 使 用 站 点 
定义 向 导 , 或 者 单 击 “ 高 级 "选项 卡 以 使 用 “高 级 "设置 ,如 图 9-2-1、 图 9-2-2 所 示 。 

















Dreamweaver 中 的 站 点 是 文件 和 文件 夹 的 集合 ， 它 对 应 于 服务 器 上 的 eb 站 点 。 
您 打 其 为 您 的 站 点 起 什么 名 字 ? 
TE 


示例 : Iysite 

您 的 站 点 的 HTTP 地 址 QL) 是 什么 ? 
Map f 

示例 : http: //wee.myBost com/aySite 


二 和 








E50) mE ma J [C map J 








图 9-2-1 新 建站 点 “基本 ”选项 卡 
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š: sm 2] 
D: wee\lzrh\tenplates\ 未 命名 站 点 2\ 





[Contribute 
模板 


OZW 加 站 点 根 目录 G 
hetp:71 


a s lu) sm 


Spry 


EHAN SHH: 回 使 用 区 分 大 小 写 的 链接 检查 WD 
组 存 : Z| Ray Q 


a 














图 9-2-2 新 建站 点 “高 级 "选项 卡 


9.2.2 管理 站 点 文件 


在 上 一 节 学 习 了 如 何 创建 站 点 ,新 创建 的 站 点 是 空 的 或 杂乱 的 ,本 节 将 学 习 在 
Dreamweaver 中 如 何 管理 站 点 中 的 文件 ,使 用 “文件 ”面板 , 它 一 般 在 Dreamweaver 主 窗口 
的 右边 ,如 图 9-2-3 所 示 。 





外 四 ”oa | en ~ | D -° 
文件 (月 E 查看 (V) EAN 修改 (M) 格式 (D) SAO AS @D(W) WAH) 





























9-2-3 “文件 ”面板 
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在 “文件 ”面板 上 ,从 “站 点 ”弹出 式 菜单 中 选择 一 个 “站 点 ”, 就 可 以 对 相应 的 站 点 文件 内 
容 进 行 维护 管理 ,如 图 9-2-4 所 示 。 


“文件 ”面板 工具 栏 的 工具 可 以 方便 与 远程 服务 端 上 的 文件 进行 “同步 “获取 ”上 传 ” 等 
功能 ,如 图 9-2-5 所 示 。 


tenplate. config 


tenplate. config 





n í a 


图 9-2-4 “站 点 ”窗口 图 9-2-5 “同步 "等 工具 图 标 


也 可 以 单 击 以 上 工具 栏 中 的 “展示 以 显示 本 地 和 站 点 ”的 最 右边 的 按钮 ,弹出 文件 管理 
对 话 框 ,如 图 9-2-6 所 示 。 


win 2011/4/20 22:15 — 
aja 2011/4/23 11:17 
asp + i 2011/4/20 21:50 
backup 2010/8/13 17:03 
din 2011/4/19 17:52 
cache LE :; 1B HTML 文档 2011/4/19 17:56 
calendar | 1KB HTWL 文档 2011/4/20 22:09 
config - G1B KL 文档 2011/4/23 11:17 
es O inservim hte SIB KTL 文档 2011/4/20 22:04 
datas menslist. hta 3B HL 文档 2011/4/20 22:19 
editor D amsvim hm 3EB HL 文档 2011/4/20 22:06 
help template config IKB XL Co... 2011/4/20 22:14 
ee, 20 w i$ 2011/4/20 22:15 
install -二 teplate config 1K IML Co... 2011/4/20 22:15 
software 

templates 

tools 

update 

webserver 

bnsserverd. 

error hta 

index aspx 

web confie 








9-2-6 “展示 以 显示 本 地 和 站 点 "窗口 
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使 用 存储 库 视图 进行 文件 的 写 和 取出 与 CS3 版 本 不 同 , 在 文件 面板 中 ,地 图 视图 换 为 
了 存储 图 视图 ,Subversion 是 一 个 版 本 控制 软件 ,集成 了 Subversion 的 Dreamweaver CS4 
提供 了 更 健壮 的 文件 版 本 控制 、 回 滚 等 的 取出 文件 / 存 回 文件 的 体验 ,无需 任何 第 三 方 工具 
或 命令 行 界 面 , 整 个 版 本 控制 系统 都 在 Dreamweaver CS4 中 完成 。 如 图 9-2-7 所 示 ,由 于 未 
配置 远 端 站 点 以 及 其 他 条 件 ,在 存储 库 视 图 中 无 法 访问 服务 器 和 项 目 。 





已 网 页 制作 教学 ~ | 存储 库 视 图 ~ 
*# celo +z 6e6lB 

无 法 访问 服务 器 和 项 目 ? 

«Cm ee , 
© 文件 活动 已 完 成 . [HB#...) 





图 9-2-7 存储 库 视 图 


9.3 创建 和 编辑 常见 的 网 页 元 素 


在 “文件 ”面板 中 双击 某 个 网 页 文档 的 文件 名 ,可 以 看 到 Dreamweaver 将 在 文件 编辑 区 
内 打开 这 个 文档 ,Dreamweaver 默认 使 用 设计 视图 显示 网 页 文档 的 界面 ,如 图 9-3-1 所 示 。 


— 
Em m- o- a- | s » | A -~ 








MÀ Div 标签 - 
CSS 样 式 


文件 


man —  -) mesa 

















Om) sto) [无 X 


Bcs mm 无 - BRO 























图 9-3-1 “设计 ”视图 
可 以 单 击 视图 切换 具 栏 中 的 “代码 ”按钮 ,使 用 文档 以 代码 方式 供 我 们 编辑 ,如 图 9-3-2 
所 示 。 
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<!DOCTYPE html PUBLIC 
“-//W3C//DTD XHTML 1.0 
Transitional//EN" 
“http://www.w3.org/TR/xhtml1/DTD/ 
xhtml1-transitional.dtd"> 
<html xmlns= 

“http://www. w3.0rg/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" 
content="text/html; 
charset=utf-8" /> 


<title> 无 标题 文档 c/title> 








图 9-3-2 “代码 ”视图 
可 单 击 “ 拆 分 ”按钮 ,使 文档 同时 显示 设计 界面 和 代码 ,如 图 9-3-3 所 示 。 





*-//W3C//DTD XHTML 1.0 

Transitional//EN" 

“http://www. w3.org/TR/xhtml1/DTD/ 

xhtmll-transitional.dtd"> 

<html xmlns= 

“http://www.w3.ora/1999/xhtml"> 
, 


图 9-3-3 “ 拆 分 "视图 
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下 面 简 单 介绍 常见 页 面 元 素 的 操作 。 


在 文档 的 “设计 ”视图 中 , 回 车 即刻 产生 新 的 段落 < p ></p > 标签 , 按 住 Shift 键 的 同时 
回 车 即 可 在 插入 点 的 当前 位 置 产生 换行 标签 < br/>。 


在 “插入 ”面板 中 ,提供 一 系列 按钮 ,用 于 向 网 页 添加 常见 的 页 面 元 素 ,如 图 9-3-4 所 示 。 








图 9-3-4 “插入 ”面板 
如 果 要 搬入 图 像 ,应 先 在 文档 中 将 光标 插入 点 定位 在 要 搬入 图 像 的 位 置 ,再 单 击 * 插 入 ” 


面板 中 的 “图 像 "按钮 。 将 弹出 * 选 择 图 像 源 文件 对话 框 ,在 其 中 选择 要 添加 到 页 面 中 的 图 
像 文件 ,如 图 9-3-5 所 示 。 


Eee 一 ~ — ` ua) 





ARZA: [站 点 根 目 录 J 
A Hind ASARAS 
FRAD: JAM -020m memi 
名 称 š: szam 
d FormatFactory 2016/1/10 21:31 
J HiSuite 2016/1/6 9:25 
D Tencent Files 


2016/2/24 8:55 









































图 9-3-5 “选择 图 像 源 文件 "对话 框 


单 击 “ 确 定 ” 按 钮 后 ,将 弹出 “图 像 标 签 辅 助 功能 属性 "对话 框 ,在 其 中 可 设置 图 像 的 蔡 代 
文字 ,如 图 9-3-6 所 示 。 


单 击 “ 确 定 ” 按 钮 后 ,图 像 将 插入 到 文档 中 ,并 位 于 之 前 所 在 插入 点 的 位 置 ,如 图 9-3-7 
所 示 。 





如 果 图 像 插入 后 ,需要 更 改 成 为 其 他 图 像 文 件 ,或 者 将 其 作为 链接 ,或 者 要 设 定 图 像 的 
显示 尺寸 等 ,可 以 使 用 “属性 ”面板 。 
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车 换文 本 1 | 
n wc BÄ 
K 








如 果 在 插入 对 象 时 不 想 输入 此 信息 ， 先 更 改 - 轿 助 功 
#ruwem. 








图 9-3-6 “图 像 标签 辅助 功能 属性 ”对 话 框 





py m- o- a- | HH » | E 一 ”> 






























































图 9-3-7 插入 图 像 


插 和 人 超 链 接 : 单 击 * 插 入 ?面板 中 的 “超级 链接 ?按钮 ,可 向 页 面 中 的 光标 插入 点 的 位 置 
添加 超 链 接 , 在 弹出 的 “超级 链接 ”对 话 框 中 设置 链接 的 文本 、 网 址 、 目 标 等 属性 ,如 图 9-3-8 
所 示 。 




















9-3-8 “超级 链接 ”对 话 框 
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对 于 文档 中 已 存在 的 文字 或 图 像 , 可 以 选中 后 在 “属性 ”面板 中 将 它们 作为 超 链接 ,如 
图 9-4-9 所 示 。 











u Dl 
ERD [无 = 类 无 + BI 湛江 经 绎 标题 0D[ | 
Ë css mü 无 > BO) "9D 目标 四 = 








Canit] Hana] 
图 9-3-9 “属性 ”面板 


如 果 要 链接 到 本 站 点 内 的 其 他 页 面 ,可 以 在 “属性 ”面板 “链接 ”文本 框 右 侧 单 击 文件 夹 
图 标 , 选 择 本 站 内 的 页 面 。 





9.4 表格 及 列表 操作 


要 创建 列表 ,可 以 在 文档 中 输入 作为 列表 项 目的 多 个 段落 ,将 这 些 段 落选 中 , 单 击 “ 属 
性 ”面板 中 的 “项 目 列表 ”或 “编号 列表 ”按钮 ,可 以 将 这 些 选中 的 段落 创建 为 无 序列 表 或 有 序 
列表 ,如 图 9-4-1 所 示 。 
































图 9-4-1 列表 操作 


结果 如 图 9-4-2 所 示 。 
要 创建 表格 ,可 以 先 将 光标 插入 点 定位 在 要 添加 表格 的 位 置 , 单 击 “ 插 入 ”面板 中 的 表格 
按钮 ,弹出 “表格 ”对 话 框 ,如 图 9-4-3 所 示 。 
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属性 
ein a Aa 


Bcs D x - HRO 
























































9-4-3 “表格 "对话 框 


输入 表格 的 行 数列 数 、 宽 度 .边框 及 单元 格 边 距 和 间距 ,设置 标题 单元 格 的 位 置 , 输 入 
表格 标题 文字 , 单 击 “ 确 定 ” 按 钮 ,结果 如 图 9-4-4 所 示 。 

如 果 需 要 对 已 经 创建 的 表格 进行 修改 , 则 可 单 击 表格 的 边框 线 将 此 表格 选中 ,再 在 “ 属 
性 ”面板 中 更 改 设置 。 
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W]ey Q oO savi] 












[om] ARD [标题 上 
Bcs mo 无 - io 























图 9-4-4 表格 属性 


将 光标 插入 点 置 于 单元 格 中 ,可 以 在 “属性 ?面板 中 对 此 单元 格 的 属性 进行 设置 ,也 可 以 
用 鼠标 拖 动 选中 一 批 连续 的 单元 格 , 对 它们 的 属性 进行 统一 的 设置 ,如 图 9-4-5 所 示 。 





By m- o- a- | w - | www -° 
menus/DWMenufile menus/DWMenuEdit menus/DWMenuView menus/DWMenulnser 











r 
<> KUL 
B css 
EE] =ë mog jam 

— mit saoga č mo _ 


图 9-4-5 选择 多 个 单元 格 
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要 实现 单元 格 合并 ,应 先 用 鼠标 拖 动 选择 相 邻 的 要 合并 的 一 系列 单元 格 ,再 单 击 * 属 性 ” 
面板 左下 角 的 “合并 所 选单 元 格 , 使 用 跨度 ”按钮 ,结果 如 图 9-4-6 所 示 。 
























































图 9-4-6 单元 格 合并 


9.5 表单 及 表单 元 素 操作 


要 在 文档 中 创建 及 为 表单 添加 表单 元 素 ,可 使 用 “插入 ”面板 中 的 “表单 ”选项 卡 ,如 
图 9-5-1 所 示 。 





图 9-5-1 “插入 表单 ”面板 
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注意 : 
表单 在 网 页 中 只 是 作为 表单 元 素 的 容器 , 它 是 没有 界面 的 ,在 Dreamweaver 的 设计 界 
面 中 , 它 显示 为 红色 的 虚线 框 ,之 后 插入 具体 的 表单 元 素 时 ,确保 光标 位 于 虚线 框 内 。 


总 结 


æ Dreamweaver 是 业界 被 广泛 使 用 的 站 点 管理 和 页 面 制作 的 可 视 化 工具 。 

名 一 般 应 先 创建 站 点 ,再 编辑 页 面 , 这 样 方便 使 用 站 点 内 的 各 种 资源 。 

名 可 以 使 用 Dreamweaver 方便 地 在 页 面 中 创建 超 链 接 、 图 像 、 表 格 、 表 单 及 表单 元 素 等 
网 页 中 的 元 素 。 


课 后 习题 


(1) 总 结 Dreamweaver 的 各 项 优点 。 
(2) 描述 Dreamweaver 新 建站 点 的 步骤 。 
(3) 总 结 Dreamweaver 创建 超 链接 的 几 种 方式 。 
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使 用 Dreamweaver 


管理 样式 和 模板 e 





E 


要 掌握 使 用 Dreamweaver 管理 样式 
名 掌握 使 用 Dreamweaver 管理 模板 


本 章 单词 
请 在 预习 时 学 会 下 列 单词 的 含义 和 发 音 ,并 填写 在 横 线 处 。 
1. Dreamweaver: 


2. Adobe: 








10.1 管理 样式 


在 Dreamweaver 中 可 以 方便 地 创建 和 使 用 样式 。 

现在 按 步骤 来 介绍 E Dreamweaver 中 ,新建 了 一 个 HTML 页 面 之 后 ,在 面板 底部 单 
击 CSS, 如 图 10-1-1 所 示 。 

然后 单 击 编辑 规则 ,如 图 10-1-2 所 示 。 

选择 器 类 型 列表 框 中 ,有 4 种 选择 ,如 图 10-1-3 所 示 。 它 们 分 别 表示 类 选择 器 .ID 选择 
器 .HTML 标签 选择 器 和 上 下 文选 择 器 。 

在 规则 定义 下 方 的 列表 框 中 有 两 种 选择 ,如 图 10-1-4 所 示 。 

如 果 选 择 “ 仅 限 该 文档 ”, 则 最 终生 成 的 CSS 代码 将 作为 内 部 样式 放置 在 < head > 标签 
内 ; 如 果 选 择 “ 新 建 样式 表 文件 ”, 则 将 创建 独立 的 CSS 文件 来 存储 最 终生 成 的 CSS 代码 ， 
并 在 当前 文档 中 自动 生成 < link > 标签 来 连接 这 个 外 部 样式 表 文 件 。 

在 这 里 , 先 选择 “类 选择 器 ”, 在 “规则 定义 ?中 选择 “ 仅 限 该 文档 ”, 然 后 给 类 选择 器 取 一 
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个 名 字 , 如 ”txt”, 然 后 单 击 * 确 定 ? 按 钮 ,弹出 “. txt 的 CSS 规则 定义 ”对 话 框 ,如 图 10-1-5 
所 示 。 
























































w mm mr 
选择 器 类 型 : 








图 10-1-3 ”选择 器 类 型 图 10-1-4 规则 定义 
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分 类 























类 型 
Font-fanily Œ): | d 
Font-size (S) > [px =| Font-vei ght (8) ` 
Font-style (T): ` Font-variant (y) ` 
Line-height (D: + [y =) Tert-transforn Œ): = 
Text-decoration D): [F] underline W Color (©) : 国 
E overline Q 
Elline-through (L) 
Fluiak@) 
Banw 


Caw j CE ER [ Rw 














图 10-1-5 CSS 规则 定义 


在 这 个 对 话 框 中 ,可 以 对 . txt 类 选择 器 的 样式 规则 进行 详细 配置 ,完成 后 单 击 “ 确 定 ” 


按钮 。 


此 时 ,将 在 当前 网 页 文档 的 < style > 标签 中 生成 样式 规则 代码 ,如 图 10-1-6 所 示 。 











fd 


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
“http://www.w3.org/TR/xhtm1l1/DTD/xhtm11-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" /> 
<title> 无 标题 文档 c/title> 
<style type="text/css"> 


font-size: 18px; 
font-style: italic; 
line-height: normal; 
font-weight: bold; 
font-variant: normal; 
text-transform: uppercase; 
color: #F00; 
text-decoration: overline; 
border: 1px solid #FF0; 

} 

一 > 

</styley</head> 


1K/1 $ Unicode r-e) 








10-1-6 生成 的 样式 规则 代码 


此 后 ,如 果 要 在 当前 网 页 文档 中 某 标签 元 素 中 使 用 这 个 类 样式 ,可 以 在 属性 面板 中 直接 


选择 ,如 图 10-1-7 所 示 。 
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图 10-1-7 给 元 素 应 用 样式 表 


如 果 目 前 已 经 存在 样式 表 文 件 , 也 可 以 选择 附加 到 当前 文档 。 操 作 如 下 : 在 面板 的 底 
部 单 击 “ 附 加 样式 表 ” 按 钮 ,如 图 10-1-8 所 示 。 





图 10-1-8 ”附加 样式 表 
弹出 “链接 外 部 样式 表 ” 对 话 框 ,在 其 中 输入 或 选择 CSS 样式 文件 的 地 址 , 单 击 “ 确 定 ” 


按钮 。 












zeno: f -| CE 

















添加 为 : OHOL HAV 
RN 
ma: = 
您 也 可 以 输入 这 号 分 后 的 柑 体 类 型 列表 。 
mreanvesver 的 节 例 插 式 走 可 以 帮助 您 起 步 。 (E) 


图 10-1-9 链接 外 部 样式 表 
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在 实际 网 页 开发 中 ,用 得 最 多 的 还 是 直接 新 建 独立 的 样式 表 文 件 ,实现 HTML 内 容 和 
CSS 样式 的 彻底 分 离 ,操作 如 下 : 
执行 “文件 "菜单 中 的 “新 建 "命令 ,将 弹出 “新 建文 档 ” 对 话 框 ,如 图 10-1-10 所 示 。 
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图 10-1-10 新建 CSS 样式 文件 


选择 “空白 页 ”中 的 “页 面 类 型 "为 CSS, 单 击 “ 创 建 ” 按 钮 。 此 时 将 创建 空白 的 CSS x 
件 , 在 编写 CSS 代码 时 ,DW 将 对 CSS 属性 及 其 可 选 的 值 提供 丰富 的 代码 提示 和 自动 补 全 ， 
非常 方便 ,如 图 10-1-11 所 示 。 
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hli 


/* CSS Document */ 


l: 
© azimuth 

© background 

© background-attachment 
© background-color 

© background-image 

© background-position 
© background-repeat 

© border 

久 border-bottom 

© border-bottom-color 








10-1-11 代码 提示 


写 好 了 CSS 文件 后 ,保存 到 自己 的 文件 夹 中 ,使 用 的 时 候 如 图 10-1-8 所 示 。 附 加 样式 
表 , 然 后 在 其 中 输入 或 选择 CSS 样式 文件 的 地 址 。 
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10.2 管理 模板 


在 建设 一 个 大 规模 的 网 站 时 ,通常 需要 制作 很 多 的 页 面 ,而 且 还 要 保证 这 些 页 面 的 风格 
统一 。 为 了 提高 网 站 建设 与 更 新 的 工作 效率 ,避免 重复 操作 ,这 就 要 用 到 Dreamweaver 中 
的 模板 。 本 章 将 学 习 如 何 创建 和 使 用 模板 。 

模板 的 最 大 作用 就 是 用 来 创建 有 统一 风格 的 网 页 ,省 去 了 重复 操作 的 麻烦 ,提高 工作 效 
率 。 模 板 是 一 种 特殊 类 型 的 文档 ,文件 扩展 名 为 “. dwt”。 在 设计 网 页 时 ,可 以 将 网 页 的 公 
共 部 分 放 到 模板 中 。 要 更 新 公共 部 分 时 ,只 需要 更 改 模板 ,所 有 应 用 该 模板 的 页 面 都 会 随 之 
改变 。 在 模板 中 可 以 创建 可 编辑 区 域 , 应 用 模板 的 页 面 只 能 对 可 编辑 区 域内 进行 编辑 ,而 可 
编辑 区 域外 的 部 分 只 能 在 模板 中 编辑 。 

执行 “文件 ”一 新建" 命令 ,选择 * 空 模板 ”, 模 板 类 型 为 “HTML 模板”, 布 局 为 “ 空 ”如 
图 10-2-1 所 示 。 
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图 10-2-1 新 建 HTML 模板 


单 击 * 创 建 " 按 钮 ,将 在 站 点 中 产生 模板 文件 。 执 行 “文件 ”保存 ”命令 ,Dreamweaver 
将 弹出 警告 对 话 框 , 如 图 10-2-2 所 示 。 

















10-2-2 警告 对 话 框 
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单 击 “ 确 定 ” 按 钮 ,忽略 此 警告 ,将 模板 文件 保存 到 站 点 中 ,如 图 10-2-3 所 示 。 
单 击 “ 保 存 ” 按 钮 ,将 在 站 点 中 产生 第 一 个 模板 文件 。Dreamweaver 将 自动 创建 
Templates 文件 夹 用 于 保存 所 有 的 模板 文件 ,如 图 10-2-4 所 示 。 


mytenplat 


IË mystyle css 
一 二 untitled htnl 1KB 380 se... 








10-2-3 ”保存 模板 图 10-2-4 保存 所 有 的 模板 文件 


在 模板 文件 中 创建 多 个 页 面 共享 的 内 容 , 如 图 10-2-5 所 示 。 










































































图 10-2-5 ”在 模板 中 创建 多 个 页 面 共享 的 内 容 


将 用 于 在 多 个 页 面 中 分 别 添加 内 容 的 区 域 设置 为 可 编辑 区 域 ,操作 如 下 : 如 图 10-2-5 
中 的 < table > 标签 ,选中 之 后 ,执行 菜单 中 的 “插入 "命令 ,执行 “模板 对 象 ”, 选 择 “ 可 编辑 区 
域 ”, 并 为 此 区 域内 部 标识 唯一 的 名 称 , 结 果 如 图 10-2-6 所 示 。 
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10-2-6 设置 可 编辑 区 域 


保存 模板 文件 。 之 后 可 以 基于 已 经 创建 的 模板 新 建 风 页。 执行“ 文件 一“ 新建" 命令 ， 
选择 “模板 中 的 页 ”, 选 择 刚才 在 “我 的 站 点 "中 创建 的 模板 mytemplate, 如 图 10-2-7 所 示 。 


站 点 ; 站 点 “未 命名 站 点 2” 的 模板 : 
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图 10-2-7 新 建 模 板 中 的 页 面 
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单 击 “ 创 建 " 按 钮 ,将 生成 未 命名 的 网 页 文档 ,将 它 保存 并 命名 为 自己 需要 的 名 字 , 如 
“1. html”, 

可 以 看 到 在 1. html 网 页 中 ,有 4 个 地 方 可 以 进行 编辑 ,而 主 菜单 页 面 和 站 点 联系 方式 
两 处 不 能 被 编辑 。 对 于 站 点 中 已 经 实现 创建 的 网 页 文档 ,如 果 想 从 模板 中 获取 现 有 的 内 容 ， 
可 以 在 打开 此 文档 后 执行 “修改 "菜单 ,选择 “模板 ”, 执 行 “ 应 用 模板 到 页 "命令 ,弹出 “选择 模 
板 ” 对 话 框 ,如 图 10-2-8 所 示 。 

当 需 要 对 基于 模板 的 网 页 文档 中 的 共享 元 素 进行 修改 时 ,不 需要 针对 每 个 网 页 进行 修 
改 , 只 要 修改 它们 共享 的 模板 即 可 。 修 改 模板 以 后 ,保存 模板 文件 ,此 时 DW 会 提示 更 新 与 
此 模板 相关 的 一 系列 网 页 文档 ,如 图 10-2-9 所 示 。 





— 要 基于 此 模板 更 新 所 有 文件 吗 ? 
未 请 名 站 点 2 L E 1.htal 


mytenplate F 2.htal 
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图 10-2-8 对 已 经 创建 的 网 页 使 用 模板 图 10-2-9 更 新 模板 后 DW 提示 是 否 要 更 新 网 页 


选中 这 些 要 随 模板 一 起 更 新 网 页 文档 , 单 击 “更 新 ”按钮 , 则 这 批 网 页 将 随 着 模板 一 起 发 
生 修改 。 


总 结 


名 使 用 Dreamweaver 可 以 方便 地 创建 CSS 样式 表 , 包 括 内 部 样式 表 和 外 部 样式 表 , 直 
接 设 置 属性 即 可 。 

a (E Dreamweaver 可 以 创建 模板 ,批量 地 创建 网 页 或 者 修改 网 页 ,省 去 了 重复 操作 
的 麻烦 ,提高 了 工作 效率 。 





课 后 习题 


使 用 Dreamweaver 创建 样式 表 和 模板 ,应 用 到 自己 的 个 人 网 站 上 。 
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HTMIL 概 述 与 基本 标签 人 


名 任务 1 使 用 文本 编辑 器 创建 和 编写 简单 的 页 面 
名 任务 2 使 用 标题 标签 和 段落 标签 

名 任务 3 使 用 图 像 标签 

名 任务 4 使 用 超 链接 标签 

名 任务 5 使 图 像 成 为 超 链接 


第 1 阶段 ”指导 


指导 1 使 用 文本 编辑 器 创建 和 编写 简单 的 网 页 


完成 本 任务 所 用 到 的 主要 知识 点 : 

名 网 页 的 基本 结构 

问题 

创建 一 个 简单 的 网 页 ,练习 网 页 的 基本 结构 ， 
在 浏览 器 中 的 效果 如 图 上 机 1-1 所 示 。 

解决 方案 

(1) 在 要 保存 的 目录 下 用 鼠标 右 击 .执行 “新 
建 ”>“ 文 本 文档 ”, 将 文件 名 改 为 1. html。 

(2) 使 用 EditPlus 打开 1. html, 编 写 代 码 如 
例 上 机 1-1 所 示 ,并 保存 。 

例 上 机 1-1 一 个 简单 的 网 页 











图 上 机 1-1 一 个 简单 的 网 页 


1 <html> 
2 <head> 
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a <title> 第 一 个 HTML 页 面 </title> 
4 </head> 

5 ”<body> 你 好 ,世界 </body> 

6 </html> 


双击 1. html 文件 ,浏览 器 会 自动 启动 并 显示 此 网 页 ,观察 网 页 的 结果 。 
指导 2 使 用 标题 标签 和 上 段落 标签 


完成 本 任务 所 用 到 的 主要 知识 点 : 

避 标 题 标 签 

z Er 8 ky 3 

问题 

制作 一 个 网 页 ,使 用 标题 标签 和 段落 标签 。 结 果 如 图 上 机 1-2 所 示 。 


° Derea 


标题 第 四 级 
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荷塘 月 色 


Ee 今 晚 在 院 了 里 从 着 
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由 奏 在 屋 里 拍 着 闽 儿 ， 迷 迷 
eh 我 悄悄 地 披 了 大 衫 ， 带 





沿 着 荷塘 ， NO Us Ca a 这 是 








图 上 机 1-2 ”标题 标签 和 段落 标签 


解决 方案 
O) 按照 指导 1 的 解决 方案 步骤 创建 网 页 文档 2. html, 
(2) 使 用 EditPlus 打开 2. html, 编 写 代码 如 例 上 机 1-2 所 示 ,并 保存 。 
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例 上 机 1-2 标题 标签 和 段落 标签 


1 <html> 

2 <head> 

3 <title > 标题 标签 </title> 

4 </head> 

5 < body> 

6 < hl > 标题 第 一 级 </hl > 

T. < h2 > 标题 第 二 级 </h2 > 

8 < h3 > 标题 第 三 级 </h3 > 

9 < h4 > 标题 第 四 级 </h4 > 

10 <h5 > 标题 第 五 级 </h5 > 

11 < h6 > 标题 第 六 级 </h6 > 

12 < hl > 荷塘 月 色 </hl > 

13 <p> 这 几 天 心里 颇 不 宁静 。 今 晚 在 院子 里 坐 着 乘凉 ,忽然 想起 日 日 走 过 的 荷塘 ,在 这 满月 的 
14 光 里 ,总 该 另 有 一 番 样 子 吧 。 月 亮 渐渐 地 升 高 了 , 墙 外 马路 上 和 孩子 们 的 欢笑 ,已 经 听 不 见 了 ; 
15 妻 在 屋 里 拍 着 头 儿 , 迷 迷 糊糊 地 哼 着 眠 歌 。 我 悄悄 地 披 了 大 衫 , 带 上 门 出 去 。</p> 

16 < 了 > 沿 着 荷塘 ,是 一 条 曲折 的 小 煤 丑 路 。 这 是 一 条 幽 个 的 路 ; 白天 也 少 人 走 ,夜晚 更 加 寂寞 。 
17 荷塘 四 面 ,长 着 许多 树 , 著 笋 郁郁 的 。 路 的 一 旁 ,是 些 杨柳 , 和 一 些 不 知道 名 字 的 树 。 没 有 月 光 
18 的 晚上 ,这 路 上 阴森 森 的 ,有 些 怕 人 。 今 晚 却 很 好 ,虽然 月 光 也 还 是 淡淡 的 。</p> 

19 </body> 

20 </html> 


(3) 双击 2. html 文件 ,浏览 器 会 自动 启动 并 显示 此 网 页 ,观察 网 页 的 结果 。 
指导 3 使 用 图 像 标签 
完成 本 任务 所 用 到 的 主要 知识 点 : 


名 < spacer > 标签 

如 < br > 标签 

Z< img > 标签 

问题 

怎么 向 网 页 中 添加 不 同文 件 夹 下 面 的 图 像 文件 ,结果 如 图 上 机 1-3 所 示 。 
解决 方案 

(1) 新 建 网 页 文档 3. html。 

(2) 使 用 EditPlus 打开 3. html 网 页 ,在 其 中 编写 代码 如 例 上 机 1-3。 
例 上 机 1-3 图像 标签 


1 <html> 

2 <head> 

3 < title> 图 像 演示 文件 </title> 

4 </head> 

5 <body> 

6 < spacer size = 100> 本 地 目录 下 的 图 像 文 件 

7 < img src = "1. jpg" alt = "本 地 目录 下 的 图 像 文件 " height = "100" 
8 width="300"><br> 

9 











196 使 用 HTML 和 CSS 开 发 Web 网 站 

















三 地 文件 Cl 
ee 
dak | s E| 建议 网 站 p) 于 到 更 多 附加 模块 Y 

| @ 图 从 演示 文件 Ë ~ ~O £ + REp)- 安全 (S)> IRBH(O- @- ” 








a  — — [ 


本 地 目录 下 的 图 像 文件 = =s 


本 地 子 目录 下 的 图 像 文件 演示 
= pas 


相同 磁盘 下 其 它 目录 下 的 图 像 文 件 演示 








本 地 计算 机 其 它 磁 盘 目录 下 的 图 像 文件 演示 
部 计算 机 | 保护 模式 ; 禁用 





图 上 机 1-3 ”图像 标签 


10 < spacer size = 100 > 本 地 子 目 录 下 的 图 像 文件 演示 

11 < img src = "images/2. jpg" alt = "本 地 子 目 录 下 的 图 像 文件 演示 ”height = "100" 
12 width= "300"><br> 

13 < spacer size = 100 > 相同 磁盘 下 其 他 目录 下 的 图 像 文件 演示 

14 < img src = "../1/3. jpg" alt = "相同 磁盘 下 其 他 目录 下 的 图 像 文件 演示 " 

15 height = "100" width= "300" ><br> 

16 < spacer size= 100 > 本 地 计算 机 其 他 磁盘 目录 下 的 图 像 文件 演示 

17 < img src = "file:///E:/2/4. jpg" height = "100" width= "300" alt = "本 地 计算 机 其 
18 他 磁盘 目录 下 的 图 像 文 件 演示 ”> 

19 </body> 

20 </html> 


(3) 双击 3. html 文件 ,浏览 器 会 自动 启动 并 显示 此 网 页 ,观察 网 页 的 结果 。 


第 2 阶段 练习 


练习 1 使 用 字体 样式 标签 

问题 

将 下 面 文字 中 的 “天 街 小 雨 润 如 酥 , 草 色 伯 看 近 却 无 ”这 段 文字 设置 下 面 线 ,“ 小 荷 才 露 
尖 尖 角 ” 这 有 段 文字 设置 斜体 “自然 的 精华 ”这 五 个 字 设 置 加 粗 。 
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生命 的 伊始 ,大 概 在 第 一 场 雨 来 临 的 时 候 ,“ 天 街 小 雨 泣 如 酥 , 草 色 遥 看 近 却 无 ”星星 点 
点 般 的 绿色 ,或许 还 未 能 褪去 那 积攒 了 一 冬 的 萧瑟 ,而 诗人 眼中 的 生命 却 早已 在 这 片 卑 微 的 
绿 意 中 开始 了 嘱 呀 学 语 。 赢 弱 的 生命 尽 一 切 可 能 哆 吸 自然 的 精华 , 蓄 势 待 发 ,而 那 “ 小 荷 才 
露 尖 尖 角 ” 般 的 蓬勃 ,也 同样 怀 帮 诗 人 渴求 的 生命 。 

提示 

分 别 使 用 <b></b > 标签 .<i></i> 标 签 以 及 < u></u> 标 签 。 


练习 2 使 用 超 链接 标签 


问题 

在 你 的 个 人 主页 上 ,显示 你 经 常 浏览 的 网 站 名 称 , 如 “百度 “优酷 "。 要 求 当 浏 览 者 在 你 
的 个 人 主页 中 单 击 这 些 网 站 名 称 时 ,浏览 器 能 将 浏览 者 导航 到 这 些 网 站 的 主页 中 。 

提示 

使 用 < a ></a > 标签 可 以 在 网 页 中 实现 超 链 接 。 将 “百度 ”作为 超 链 接 的 文字 , 即 放 在 < 
a></a> 之 间 。 将 百度 网 的 网 站 https://www. baidu. com 作为 超 链接 的 网 址 , 即 作为 href 
属性 的 值 。 


练习 3 使 用 图 像 成 为 超 链 接 


问题 

在 上 一 个 练习 中 ,把 网 站 名 字 的 文字 换 成 网 站 的 logo 图 像 。 
提示 

使 用 < ing/> 图 像 标 签 代替 超 链接 文字 。 
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表格 与 列表 人 


名 任务 1 创建 简单 的 表格 
名 任 务 2 单元 格 合并 

名 任务 3 使 用 无 序列 表 
名 任 务 4 使 用 有 序列 表 
名 任务 5 使 用 表格 

名 任务 6 使 用 复杂 表格 


第 1 阶段 ”指导 


指导 1 创建 简单 的 表格 


完成 本 任务 所 用 到 的 主要 知识 点 : 

表格 的 基本 结构 

名 < table ></table > 标签 

名 <tr></tr> 标 签 

z< td ></td > 标签 和 < th ></th > 标签 

问题 

使 用 表格 存储 各 科 的 成 绩 ,结果 如 图 上 机 2-1 所 示 。 
解决 方案 

(1) 新 建 网 页 文档 4. html, 

(2) 使 用 EditPlus 打开 4. html 网 页 ,在 其 中 编写 代码 


























如 例 上 机 2-1。 图 上 机 2-1 简单 表格 
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例 上 机 2-1 简单 表格 


1 <htnl> 

2 <head> 

3 <title> 表 格 </title> 
4 </head> 

5 <body> 

6 <table border =1> 

7 < caption > 张 三 的 成 绩 单 </caption > 
8 <tr> 

9 <th> 科 目 </th> 

10 < th > 成 绩 </th> 

11 </tr> 

12 <tr> 

13 < td> Java </td> 

14 < td>89</td> 

15 </tr> 

16 SES 

17 <td> 网 页 制作 </td> 
18 <td>78 </td> 

19 </tr> 

20 Ltr 

21 <td> 计 算 机 基础 </td> 
22 < td> 97 </td> 

23 </tr> 

24 < tro 

25 <td>c 语 言 </td> 

26 <td>76</td> 

27 </tr> 


28 </table> 
29 </body> 
30 </html> 


(3) 双击 4. html 文件 ,浏览 器 会 自动 启动 并 显示 此 网 页 ,观察 网 页 的 结果 。 
指导 2 单元 格 的 合并 


完成 本 任务 所 用 到 的 主要 知识 点 : 

名 单元 格 的 colspan 属性 

名 单元 格 的 rowspan 属性 

问题 

表格 可 作为 网 页 局 部 实现 复杂 排版 的 手段 ,在 某 个 网 页 中 的 局 部 区 域 ,要 实现 如 图 上 
机 2-2 所 示 的 布局 。 

解决 方案 

(1) 新 建 网 页 文档 5. html。 
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图 上 机 2-2 合并 单元 格 


(2) 使 用 EditPlus 打开 5. html 网 页 ,在 其 中 编写 代码 如 例 上 机 2-2 所 示 。 
例 上 机 2-2 单元 格 合并 


1 <html> 

2 <head> 

3 <title> 表 格 </title> 

4 </head> 

5 <body> 

6 < table border = 1 width = "400"> 
T < tr> 

8 < td colspan = "3"> aaa </td> 
9 </tr> 

10 <tr> 

11 < td rowspan = "2"> aa </td> 
12 < td colspan = "2"> aa </td> 
13 </tr> 

14 <tr> 

15 <td> aa </td> 

16 <td> aa </td> 

17 </tr> 


18 </table> 
19 </body> 
20 </html> 


(3) 双击 5. html 文件 ,浏览 器 会 自动 启动 并 显示 此 网 页 ,观察 网 页 的 结果 。 


指导 3 无 序列 表 


完成 本 任务 所 用 到 的 主要 知识 点 : 

名 < ul >< ul> 标 签 

g< li >< li >R 

问题 

在 网 页 中 介绍 你 经 常 乘坐 的 地 铁 线路 ,结果 如 图 上 机 2-3 所 示 。 


|a- 











x 


保障 fa 7 Rioo% ~ 





图 上 机 2-3 无 序列 表 


解决 方案 

(1) 新 建 网 页 文档 6. html, 
(2) 使 用 EditPlus 打开 6. html 网 页 ,在 其 中 编写 代码 如 例 上 机 2-3。 
例 上 机 2-3 无 序列 表 


1 
2 
3 
4 
5 
6 
T 
8 
S 
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<html> 
<head> 

<title> 无 序列 表 </title> 

</head > 

<body> 

<h3 > 长 沙 地 铁 2 号 线 </h3 > 

<ul> 
< 1i> 望 城 坡 站 </1i> 
< 1i> 金 星 路 站 </1i> 
<1i> 西 湖 公 园 站 </1i> 
< 1i> 澜 湾 镇 站 </1i> 
<1i> 橘 子 洲 站 </1i> 
<1i> 湘 江 中 路 站 </1i> 
<1i> 五 一 广场 站 </1i> 
<1i> 芙 鞭 广 场 站 </1i> 
<1i> 迎 宾 路 口 站 </1i> 
<1i> 囊 家 岭 站 </1i> 
</ul> 
</body> 
</html > 
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(3) 双击 6. html 文件 ,浏览 器 会 自动 启动 并 显示 此 网 页 ,观察 网 页 的 结果 。 
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第 2 阶段 练习 


练习 1 使 用 表格 

问题 

请 用 表格 展示 你 所 在 班级 最 近 一 段 测试 的 成 绩 。 

练习 2 使 用 无 序列 表 和 有 序列 表 嵌 套 

问题 

请 在 网 页 中 介绍 你 经 常 乘坐 的 公交 线路 和 它们 经 过 的 公交 站 点 。 
练习 3 使 用 复杂 表格 


问题 
请 用 表格 展示 你 所 在 班级 本 月 的 课程 表 。 


上 机 3 








表单 与 表单 元 素 会 


名 任务 1 form # input 标签 的 简单 使 用 
吕 任 务 2 使 用 各 种 类 型 的 input 元 素 
局 任务 3 使 用 列表 框 

?任务 4 使 用 fieldset $ legend 标签 


第 1 阶段 ”指导 


指导 1 form 和 input 标签 的 简单 使 用 
完成 本 任务 所 用 到 的 主要 知识 点 : 





名 表单 和 表单 元 素 的 关系 
z< form ></form > 标签 A eak | ¿s EBLA v 
z< input />b £  @ss=s | 
问题 
在 我 们 的 网 站 中 实现 登录 页 面 的 表单 ,结果 如 图 上 

机 3-1 所 示 。 密 码 : 
解决 方案 注册 


(1) 新 建 网 页 文档 7. html。 
(2) 使 用 EditPlus 打开 7. html 网 页 ,在 其 中 编写 代 ae Q + aooe e 
码 如 例 上 机 3-1。 








例 上 机 3-1 简单 表格 图 上 机 3-1 简单 表单 
1 <html> 
2 <head> 


3 <title > 登录 表单 </title> 
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4 </head> 

5 < body> 

s < forn action = "frameset. htm1" method = "post"> 

7 <p>% : < input type = "text" name = "username" ></p> 
8 < p># 码 : < input type = "password" name = "password"></p> 
9 < input type = "submit" name = "btnlogin" value = "登录 "> 
10 <a href = "zhuce. html"> 注 册 </a> 

11 </form> 

12 </body> 

13 </html> 


(3) 双击 7. html 文件 ,浏览 器 会 自动 启动 并 显示 此 网 页 ,观察 网 页 的 结果 。 
指导 2 使 用 各 种 类 型 的 input 元 素 


完成 本 任务 所 用 到 的 主要 知识 点 : 

名 < input/> 标 签 的 type 属性 

问题 

现在 要 为 某 网 站 制作 会 员 注 册页 面 , 结 果 如 图 上 机 3-2 所 示 。 


€ B 

兴趣 爱好 : 
游戏 回 体 育 回 上 网 回 
性 别 : Bekte 


上 传 文件 : 
(38... ) 


A 计算 机 | 保护 模 z Q + R100% ~ 








图 上 机 3-2 各 种 类 型 的 input 元 素 


解决 方案 

(1) 新 建 网 页 文档 8. html。 

(2) 使 用 EditPlus 打开 8. html 网 页 ,在 其 中 编写 代码 如 例 上 机 3-2。 
例 上 机 3-2 单元 格 合并 


1 <htnl> 

2 <head> 

3 <title> 注 册 表 单 </title> 
4 </head> 
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5 < body> 

6 < form action = "frameset. html" method = "get"> 

7 <p> 用 户 名 : < input type = "text" name = "username" ></p> 

8 <p>% &nbsp; &nbsp; 码 : < input type = "password" name = "password"></p> 

9 <p> 兴 趣 爱 好 :</p> 

10 <p> 游 戏 < input type = "checkbox" name = "game"> 体 育 < input type = "checkbox" name = 
11 "diru"> 上 网 < input type = "checkbox" name = "net"></p> 

12 <p> 性 别 : 男 < input type = "radio" name = "sex" value = "man" checked = "checked"> 
13 女 < input type = "radio" name = "sex" value = "woman"></p> 

14 <p> 上 传 文件 :< input type = "file" value = "file"></p> 

15 <p>< input type = "submit" value = "注册 "> 

16 < input type = "reset" value = "重新 填写 "> 

17 </p><! -- 提交 表单 -— > 

18 </form> 

19 </body> 

20 </html> 


(3) 双击 8. html 文件 ,浏览 器 会 自动 启动 并 显示 此 网 页 ,观察 网 页 的 结果 。 


第 2 阶段 练习 


练习 1 使 用 列表 框 和 多 文本 框 


问题 
在 指导 2 的 基础 上 ,增加 选择 年 龄 的 列表 和 工作 经 历 ,其 结果 如 图 上 机 3-3 所 示 。 


用 户 名 ， 

€ p. 

兴起 爱好 : 
PRORA DAA 
性 别 : Bozo 


在 此 请 写 你 最 近 两 年 “~ 
来 的 工作 经 验 


工作 经 | 





[ICE 





图 上 机 3-3 ”列表 框 和 多 文本 框 
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练习 2 使 用 fieldset 和 legend 标签 


问题 
在 指导 2 的 基础 上 ,将 所 有 表单 元 素 分 为 两 组 ,为 每 组 提供 标题 文字 ,结果 如 图 上 机 3-4 
所 示 。 





游戏 四 体育 加 上 网 加 
性 别 : 男 @ 女 目 
上 传 文件 : 








(sm) 





. 


— 
A 计算 机 | A fa ~ R100% ~ 








图 上 机 3-4 ”表单 元 素 分 组 





名 任务 1 实现 简单 的 框架 集 

名 任务 2 实现 嵌 套 框架 集 

局 任务 3 使 用 框架 的 属性 

名 任务 4 使 用 浮动 框架 

局 任务 5 实现 复制 的 框架 集 谋 套 


第 1 阶段 ”指导 


指导 1 实现 简单 的 框架 集 


完成 本 任务 所 用 到 的 主要 知识 点 : 

名 框架 集 与 框架 的 关系 

z< frameset ></frameset > 标签 

z< frame/> 标 签 

问题 

在 大 多 数 网 页 中 ,并 不 是 所 有 的 内 容 都 需要 改变 ,如 网 页 的 导航 栏 ` 网 页 页 脚 等 ,因此 我 
们 需要 一 个 网 页 ,分 为 上 中 下 3 个 区 域 . 上 和 下 分 别 放置 网 页 的 导航 栏 和 网 页 页 脚 ,中 间 放 
置 网 页 的 主体 。 其 模拟 效果 如 图 上 机 4-1 所 示 。 

解决 方案 

(1) 分 别 创建 网 页 文档 9. html, head. html, middle. html, bottom. html 4 个 网 页 ,其 中 
9. html 作为 框架 集 页 面 。 

(2) 使 用 EditPlus 打开 9. html 网 页 ,在 其 中 编写 代码 如 例 上 机 4-1。 


208 使 




















HTML 和 CSS 开 发 Web 网 站 
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图 上 机 4-1 简单 框架 集 
例 上 机 4-1 简单 表格 


1 <html> 

2 <head> 

3 <title> rows 框架 </title> 

4 </head> 

5 < frameset bordercolor = "Yellow" rows = "25% ,50 % , *" border = "5" > 
6 < frame name = "top" src = "head. htm1"> 

7 < frame name = "middle" src = "middle. html"> 

8 < frame name = "bottom" src = "bottom. html"> 

9 </frameset > 

10 </html> 


(3) 在 head. html, middle. html, bottom. html 3 个 网 页 中 随意 创建 一 些 内 容 。 
(4) 双击 9. html 文件 ,浏览 器 会 自动 启动 并 显示 此 网 页 ,观察 网 页 的 结果 。 


指导 2 实现 嵌 套 的 框架 集 


完成 本 任务 所 用 到 的 主要 知识 点 : 

z MERER E 

问题 

在 指导 1 的 基础 上 ,创建 多 行 多 列 的 框架 集 ,其 效果 如 图 上 机 4-2 所 示 。 
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图 上 机 4-2 ”框架 集散 套 


解决 方案 
(1) 修改 9. html 页 面 的 代码 并 保存 。 
例 上 机 4-2 单元 格 合并 


1 <html> 

2 <head> 

3 <title > 框架 椒 套 </title> 

4 </head> 

5 < frameset rows = "20%, *, 15% "> 
6 < frame src = "head. html" /> 

7 < frameset cols = "20%, * "> 

8 < frame src = "left. html " /> 
9 < frame src = "right. html" /> 
10 </frameset > 

11 < frame src = "bottom. html" /> 

12 </frameset> 

13 </html> 


(2) # Ë left. html, right. html 页 面 ,随意 为 它 创建 一 些 内 容 。 
(3) 在 浏览 器 中 查看 9. html, 


第 2 阶段 练习 


练习 1 使 用 框架 的 属性 


问题 
扩展 上 一 个 练习 ,设置 head. html 网 页 所 在 的 框架 无 论 如 何不 出 现 滚 动 条 ,设置 left. 
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html 和 right. html 页 面 所 在 的 框架 不 能 被 浏览 者 改变 大 小 。 在 left. html 页 面 中 添加 3 个 
链接 ,设置 它们 指向 的 网 页 分 别 在 右 侧 框架 中 、 新 的 窗口 中 、 当 前 浏览 器 窗口 中 打开 。 


练习 2 使 用 浮动 框架 


问题 
使 用 浮动 框架 实现 指导 1 的 界面 。 


练习 3 实现 复杂 的 框架 集 找 套 


问题 
使 用 框架 集 拭 套 实现 多 文档 共享 一 个 浏览 器 窗口 的 界面 ,结果 如 图 上 机 4-3 所 示 。 


es- BPUUUYUEIIIE 
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图 上 机 4-3 复制 的 框架 集 嵌 套 
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CSS 层 登 样式 表 





名 任务 1 
名 任务 2 
名 任务 3 
名 任务 4 


使 用 HTML 标签 选择 器 

使 用 类 选择 器 

使 用 伪 类 选择 器 

使 用 ID 选择 器 和 上 下 文选 择 器 


第 1 阶段 ”指导 


指导 1 


使 用 HTML 标签 选择 器 


完成 本 任务 所 用 到 的 主要 知识 点 : 
名 HTML 标签 选择 器 


问题 


页 面 一 般 会 出 现 多 个 段落 、 标 题 等 标签 ,我 们 需要 统一 这 些 标签 的 格式 ,而 分 别 对 每 个 
标签 提供 格式 信息 会 非常 烦琐 ,另外 标题 标签 的 默认 格式 也 不 符合 我 们 的 期 望 ,我 们 希望 统 


一 标题 标签 的 格式 ,结果 如 图 上 机 5-1 所 示 。 


分 析 


使 用 HTML 标签 选择 器 可 告知 浏览 器 页 面 中 的 所 有 段落 应 如 何 显示 ,直接 以 要 重新 


定义 格式 的 标签 名 作为 选择 器 的 名 称 。 


解决 方案 
(1) 创建 HTML 页 面 ,在 < head > 标签 内 添加 < style > 标签 ,并 在 其 中 编写 CSS 


代码 。 
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苏 浙 沪 气 温 猛 降 超 10°C 华北 黄 淮 雾 副 起 


中 国 天 气 网 讯 昨天 28 日 》， 全 国 大 部 晴 多 雨 少 ,气温 北 降 南 升 。 北 方 部 分 地 区 降幅 超过 10 已 ,而 长 
江 以 南 迎 来 大 面积 升温 ， 大 部 地 区 气温 超过 20 记 。 今 天 ， 冷 空气 向 东 向 南 推进 ， 安 徽 、 江 苏 、 上 海 、 浙 江 等 
“和 包 邮 区 ”气温 将 出 现 “大 跳水 ”， 降 幅 可 达 12 记 。 此 外 ， 未 来 三 天 ， 华 北 、 黄 淮 等 地 雾 吉 来 装 ， 局 地 有 重 
Lig 


FR fas T, AARD ES. ART SARETA, ERLAR 
古 中 西部 和 东南 部 、 宁 夏 、 甘 肃 沿 河 一 带 及 甘肃 东部 、 陕 西 大 部 、 湖 北 北部 、 河 南大 部 、 苏 皖 中 北部 、 山 东 
大 部 、 山 西 大 部 、 河 北 北部 、 北 京 、 辽 宁 中 西部 等 地 气温 普遍 下 降 2-6 记 ， 其 中 宁夏 南部 、 陕 西 中 北部 、 河 
南西 南部 、 山 东西 部 及 江苏 中 北部 部 分 地 区 降幅 达到 s-12 亡 。 


在 冷 空 气 到 来 之 前 ， 长 江 以 南大 部 地 区 昨天 迎 来 升温 。 监 测 显 示 ，14 时 ， 浙 江 、 福 建 、 江 西 、 湖 南 中 南 
部 、 广 东 东 部 、 广 西北 部 、 贵 州 东部 和 南 外 B 准 及 云南 北部 和 西南 部 等 地 升幅 普遍 有 4-8 记 ， 局 地 升幅 达到 9- 
10 记 ,气温 普遍 达到 20 记 上 下 。 省 会 级 城市 中 ， 重 庆 为 20. 8 记 、 贵 阳 为 19. 6 记 、 长 沙 为 21.8 它 、 杭 州 为 
23.1 已 、 福 州 为 21.1D、 广 州 为 20 记 。 











图 上 机 5-1 标签 选择 器 


例 上 机 5-1 标签 选择 器 


<! DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
"http://www. w3. org/TR/xhtm11/DTD/xhtm1l1 — strict. dtd"> 
<html> 
<head> 
<title> 标 签 选择 器 </title> 
< style type = "text/css"> 
hi{ 
font - size:30px; 
text - align:center; 
font- family: "微软 雅 黑 "; 


pt 
color:red; 
font — size:14px; 
text — indent :28px; 
line- height:28px; 
j; 
</style> 
</head> 
< body> 
<hl > 苏 浙 沪 气温 猛 降 超 10C ERER gë E </h1 > 
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22 <p> 中 国 天 气 网 讯 昨天 (28 日 ), 全 国 大 部 晴 多 雨 少 ,气温 北 降 南 升 。 北 方 部 分 地 区 降幅 超过 
23 ”10C ,而 长 江 以 南 迎 来 大 面积 升温 , 大 部 地 区 气温 超过 20C 。 今 天 , 冷 空气 向 东 向 南 推进 ,安徽 、 
24 江苏、 上 海 , 浙 江 等 " 包 邮 区 "气温 将 出 现 "大 跳水 ", 降 幅 可 达 12TC 。 此 外 ,未 来 三 天 ,华北 、 黄 淮 
25 ”等 地 雾 者 来 袭 ,局 地 有 重度 考 。</p> 

26 <p> 昨 天 ,在 冷 空气 的 袭击 下 ,北方 地 区 遭遇 大 范围 降温 。 监 测 显 示 , 与 前 一 天 同时 次 相 比 ， 
27 昨天 14 时 内 蒙古 中 西部 和 东南 部 .宁夏 甘肃 沿 河 一 带 及 甘肃 东部 .陕西 大 部 湖北 北部 河南 大 
28 部 \ 苏 皖 中 北部 .山东 大 部 山西 大 部 ,河北 北部 ,北京 .辽宁 中 西部 等 地 气温 普遍 下 降 2- 67Z ,其 
29 ”中 宁夏 南部 陕西 中 北部 河南 西南 部 ,山东 西部 及 江苏 中 北部 部 分 地 区 降幅 达到 8- 12C 。</p> 
30 <p> 在 冷 空气 到 来 之 前 ,长 江 以 南大 部 地 区 昨天 迎 来 升温 。 监 测 显 示 ,14 时 ,浙江 ,福建 、 江 
31 西 .湖南 中 南部 ,广东 东部 ,广西 北部 、 贵 州 东 部 和 南部 以 及 云南 北部 和 西南 部 等 地 升幅 普遍 有 
32 4 一 8TC ,局 地 升幅 达到 9- 107 ,气温 普遍 达到 20T 上 下 。 省 会 级 城市 中 ,重庆 为 20.8 、 贵 阳 
33 为 19.6T ,长 沙 为 21.8TC HMA 23.10 、 福 州 为 21.1T ,广州 为 20C 。</p> 

34 </body> 

35 </html> 


(2) 使 用 CSS 注释 (/ * 被 注释 的 内 容 * /) 将 < style > 标签 内 的 CSS 代码 注释 掉 ,保存 
之 后 在 浏览 器 中 重新 查看 此 页 面 ,可 以 看 到 效果 的 不 同 (字体 、 缩 进 、 字 体 大 小 、 居 中 等 )。 


指导 2 使 用 类 选择 器 


完成 本 任务 所 用 到 的 主要 知识 点 : 

名 类 选择 器 

要 标签 的 CLASS 属性 

问题 

在 大 多 数 情况 下 ,同一 种 标签 的 多 个 实例 使 用 完全 相同 的 样式 并 不 可 行 。 如 文本 框 、. 单 
选 按钮 、 复 选 框 、 提 交 按 钮 . 重 置 按钮 等 尽管 都 是 < input > 标签 ,但 我 们 可 能 希望 它们 具有 不 
同 的 样式 。 例 如 这 样 设计 : 表单 中 所 有 用 于 输入 文字 的 表单 元 素 ( 不 管 是 文本 框 还 是 密码 
框 或 多 行文 本 域 ) 共 享 相同 的 一 种 样式 ,而 所 有 用 于 让 浏览 者 单 击 执行 确认 动作 的 按钮 (不 
管 是 提交 按钮 还 是 重 置 按钮 或 自 定义 命令 按钮 ) 则 共享 另 一 种 样式 。 

结果 如 图 上 机 5-2 所 示 。 























图 上 机 5-2 类 选择 器 


分 析 
在 这 种 情况 下 ,我 们 应 该 考虑 将 页 面 中 的 多 个 元 素 划 归 为 同一 个 类 ,而 另 一 批 元 素 规划 
为 另 一 个 类 。 按 图 上 机 5-2 来 说 ,将 用 于 输入 文字 的 表单 元 素 划 为 一 个 类 、 按 钮 划 为 一 个 
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类 ,每 一 种 类 对 应 一 种 样式 表 。 
解决 方案 
创建 HTML 页 面 ,如 例 上 机 5-2 所 示 编 写 代 码 ,使 用 类 选择 器 。 
例 上 机 5-2 类 选择 器 


<! DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
"http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
<html> 
<head> 
<title> 类 选择 器 </title> 
< style type = "text/css"> 
.title{ 
font - size:14px; 
font - weight: bold; 
} 
.txt{ 
background - color : # dddddd; 
border :dashed 1px green; 
} 
.btn{ 
border:solid 1px gray; 
color:blue; 
} 
</style> 
</head> 
< body> 
< form> 
< span class = "title"> 日 志 标题 </span> 
< input class = "txt" type="text" />< br /> 
< span class = "title"> 日 志 内 容 </span> 
< textarea class = "txt" cols = "40" rows = "5"></textarea>< br /> 
< input class = "btn" type = "submit" value = "发 表 日 志 " /> 
< input class = "btn" type = "reset" value = " 重 写 日 志 " /> 
</form> 
</body> 
</html> 


第 2 阶段 练习 


练习 1 使 用 ID 选择 器 和 上 下 文选 择 器 


问题 

页 面 上 大 部 分 段落 的 样式 为 14px 和 黑色 ,但 某 几 个 段落 被 包含 在 一 个 特定 的 div 标签 
内 ,对 于 被 这 个 特定 的 div 标签 包含 的 段落 ,要 将 它们 的 样式 设 为 12px 的 字号 和 灰色 文字 。 
该 怎么 做 呢 ? 
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提示 
可 以 先 对 < p > 标签 定义 为 标签 选择 器 , 它 会 对 整个 页 面 中 的 所 有 段落 都 有 效 。 再 为 特 
定 的 < div > 标签 提供 ID 属性 ,然后 用 这 个 ID 值 和 < p > 标签 的 名 称 组 成 上 下 文选 择 器 。 


练习 2 使 用 伪 类 选择 器 


问题 

可 以 通过 伪 类 分 别 为 访问 过 的 链接 和 未 访问 过 的 链接 设置 不 同 的 样式 。 要 求 : 创建 外 
部 样式 表 文 件 , 在 其 中 编写 关于 链接 的 样式 规则 ,包含 4 种 状态 (普通 状态 .已 访问 过 状态 、 
激活 状态 和 鼠标 悬 停 状态 ) ,分别 拥有 不 同 的 样式 。 

提示 

外 部 样式 表 文 件 与 网 页 文件 一 样 , 本 质 是 文本 文件 ,只 是 扩展 名 为 . css。 在 它 里 面 通常 
声明 多 个 网 页 都 要 使 用 的 样式 规则 。 在 网 页 代码 < head > 标签 内 ,可 以 使 用 < link > 标签 来 
引用 外 部 样式 表 。 

为 未 访问 过 的 链接 和 已 访问 过 的 链接 分 别 使 用 伪 类 a:link 和 a:visited。 活 动 的 链接 对 
应 的 伪 类 为 a:active, 有 鼠标 悬 停 的 链接 对 应 的 伪 类 为 a:hover。 








上 机 6 





常用 的 CSS 样 式 会 


名 任务 1 使 用 颜色 与 背景 属性 

局 任务 2 使 用 文本 和 字体 属性 

名 任务 3 使 用 边框 属性 

局 任务 4 使 用 无 序列 表 实 现 简单 的 菜单 
名 任务 5 熟悉 常用 的 CSS 样式 属性 


第 1 阶段 ”指导 


指导 1 使 用 颜色 与 背景 属性 
完成 本 任务 所 用 到 的 主要 知识 点 : 


æ background-image 

æ background-repeat 

æ background-position 

问题 

对 于 一 个 区 域 的 背景 图 像 ,我 们 希望 只 出 现 一 次 ,而 不 是 重复 平 铺 ; 有 时 候 还 想 要 精确 
地 指定 背景 图 像 出 现 的 位 置 ,结果 如 图 上 机 6-1 所 示 。 

分 析 

background-repeat 属性 可 以 设置 背景 图 像 是 否 重复 平 铺 以 及 向 哪个 方向 平 铺 ; 
background-position 属性 可 以 使 用 像素 或 百分比 来 精确 地 控制 背景 图 出 现 的 位 置 。 

解决 方案 

创建 HTML 页 面 , 在 其 < body > 标签 内 添加 三 行 两 列 的 表格 ,在 < head > 标签 内 添加 
< style > 标签 ,然后 在 < style > 标签 中 编写 如 例 上 机 6-1 所 示 的 CSS 代码 。 
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图 上 机 6-1 背景 属性 
例 上 机 6-1 背景 尾 性 





指导 2 使 用 文本 和 字体 属性 
完成 本 任务 所 用 到 的 主要 知识 点 : 


æ text-align 








218 使 用 HTML 和 CSS 开 发 Web 网 站 

















æ text-indent 

æ line-height 

æ font-size 

æ font-family 

问题 

我 们 想 对 下 面 的 文本 进行 修饰 ,包括 文本 的 背景 色 .字体 颜色 及 大 小 ` 居 中 、 行 高 等 。 效 
果 如 图 上 机 6-2 所 示 。 














一 记 美 如 画 他 挥 别 丹佛 


以 现在 的 战绩 来 看 , 湖人 与 握 金 进军 季 后 赛 几 乎 没有 可 能 ,两 支 昔日 劲旅 现在 都 
艰难 地 走 在 重建 的 道路 上 。 


自从 科比 宣布 赛季 结束 后 退役 ， 湖 人 队 的 每 一 次 客场 比赛 都 会 吸引 大 批 球迷 前 来 
观战 。 今 日 则 是 科比 最 后 一 次 造访 丹佛 ， 现 场 同样 来 了 很 多 身 穿 楷 金 队 服 的 球迷 。 





图 上 机 6-2 文本 、 字 体 属性 


分 析 

对 于 背景 色 , 可 以 使 用 background-color 来 修饰 ; 字体 颜色 和 大 小 使 用 font-color 和 
font-size 来 修饰 ,也 可 以 使 用 font 直接 修饰 ; 字体 类 型 使 用 font-family; 文本 的 行 高 使 用 
line-height, 取 值 为 像素 ; 文字 缩 进 则 为 text-indent, 

解决 方案 

创建 HTML ,编写 代码 如 下 。 

例 上 机 6-2 文本 、 字 体 属性 


1 <!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
2 "http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
3 <html> 

4 <head> 

5 <title> CSS 控制 文本 字体 </title> 

6 < style type = "text/css"> 

7 haf 

8 background - color : # E7EAEB; 

9 font - family:" 微 软 雅 黑 "; 

10 font — size:28px; 

11 color:red; 

12 text - align:center; 

13 ) 

14 p{ 

25 color:blue; 


16 font — size:14px; 
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> text — indent :28px; 
18 line- height :20px; 
19 } 

20 </style> 

21 </head> 

22 <body> 


23 < hl > 一 记 美 如 画 他 挥 别 丹 佛 </hl > 

24 <p> 以 现在 的 战绩 来 看 ,湖人 与 掘 金 进军 季 后 赛 几乎 没有 可 能 ,两 支 昔日 劲旅 现在 都 艰难 
25 ”地 走 在 重建 的 道路 上 。</p> 

26 <p> 自 从 科比 宣布 赛季 结束 后 退役 ,湖人 队 的 每 一 次 客场 比赛 都 会 吸引 大 批 球迷 前 来 
27 观战 。 今 日 则 是 科比 最 后 一 次 造访 丹佛 ,现场 同样 来 了 很 多 身 穿 紫金 队 服 的 球迷 。</p> 

28 </body> 

29 </html> 


指导 3 使 用 边框 属性 
完成 本 任务 所 用 到 的 主要 知识 点 : 


æ border-width 

æ border-style 

æ border-color 

问题 

我 们 想 对 一 个 区 域 的 项 、 右 \ 底 、 左 4 个 边框 分 别 进行 设置 ,结果 如 图 上 机 6-3 所 示 。 








E) F\shilihtml PProx 








右边 是 一 个 文本 框 ， 这 是 文本 框 只 有 底 边 栓 


TOER, MERAT AGIN, FH T. BEN, EAS. K 
Sisi m rius, 梅 西 在 这 一 年 中 打 进 了 52 个 进 球 ， 并 拿 到 了 自 


吕 的 第 五 座 金 球 奖 








图 上 机 6-3 边框 属性 


分 析 
使 用 border-top、border-right、border-bottom、border-left 属性 可 以 对 4 个 边框 分 别 设 


置 ; 另外 使 用 border-width border-style, border-color 可 以 设置 边框 的 粗细 、 线 型 和 颜色 。 


解决 方案 
创建 HTML 页 面 , 编 写 代 码 如 例 上 机 6-3 所 示 。 
例 上 机 6-3 边框 属性 


1 <!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
2 "http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
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3 <html> 

4 <head> 

5 <title> 边 框 属性 </title> 

6 <style> 

7 #p1( 

8 border:none; 

9 border - top:4px solid blue; 

10 border - bottom: 2px dotted red; 

11 + 

12 #txt{ 

13 border — width:1px; 

14 border - style:none none solid none; 

15 border - color : gray; 

16 $ 

17 </style> 

18 </head> 

19 <body> 

20 <div id= "myDiv"> 

21 右边 是 一 个 文本 框 : 

22 < input id= "txt" value = "这 是 文本 框 只 有 底 边 框 ”/> 
23 <p id= "pl"> 在 2015 年 中 ,巴萨 成 就 了 五 冠 王 的 伟业 , 夺 得 了 西甲 .国王 杯 、 欧 冠 欧洲 
24 超级 杯 和 世 俱 杯 的 冠军 , 梅 西 在 这 一 年 中 打 进 了 52 个 进 球 ,并 拿 到 了 自己 的 第 五 座 金 球 奖 。</p> 
25 </div> 

26 </body> 

27 </html> 

28 


指导 4 使 用 无 序列 表 实 现 简单 的 菜单 
完成 本 任务 所 用 到 的 主要 知识 点 : 


æ border 

æ background 

æ display 

æ width 

问题 

一 般 网 站 的 网 页 顶部 都 有 网 站 的 导航 菜单 , 单 击 各 个 菜单 项 可 以 转 到 不 同 的 栏目 ,我 们 
要 在 网 页 中 实现 一 个 简单 的 菜单 ,结果 如 图 上 机 6-4 所 示 。 

分 析 

可 以 将 整个 菜单 看 作 是 一 个 无 序列 表 , 每 个 列表 项 目 就 是 一 个 菜单 项 ; 菜单 项 被 单 击 
后 要 能 够 链接 到 其 他 栏目 页 面 ,所 以 列表 项 目 中 应 该 包含 超 链接 ; 鼠标 移动 到 菜单 项 上 方 
时 菜单 项 背景 会 变色 ,表明 它 即将 被 用 户 单 击 , 这 一 点 可 以 通过 超 链接 的 hover 伪 类 来 

解决 方案 

创建 HTML 页 面 .编写 如 例 上 机 6-4 所 示 的 代码 。 
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图 上 机 6-4 无 序列 表 
例 上 机 6-4 无 序列 表 


1 <!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
z "http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
3 <html> 

4 <head> 

5 <title> 无 序列 表 </title> 

6 < style type = "text/css"> 

7 #myul li{ 

8 background - color: # efefef; 

9 float:left; 

10 width:100px; 

11 border:1px solid # fedcba; 

12 text - align:center; 

13 } 

14 # myul 1i af 

35 text - decoration:none; 

16 } 

i # myul li a:hover{ 

18 width:100 $% ; 

19 background - color: # cccccc; 

20 ) 

2: </style> 

22 </head> 

23 <body> 

24 <ul id= "myul"> 

25 <li><a href = " #">Ë M </a></li> 

26 <li><a href = " # "Em </a ></li> 
27 <li><a href="#"> 师 资 力 量 </a></1i> 
28 <li><a href = "#"> 课 程 介绍 </a></1i> 
29 </ul> 

30 </body> 


31 </html> 
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第 2 阶段 ”练习 


练习 1 设置 超 链接 的 装饰 线 


问题 
超 链接 在 浏览 器 中 默认 是 有 下 画 线 的 。 我 们 希望 页 面 中 大 部 分 超 链接 没有 任何 装饰 
线 , 但 局 部 区 域 的 超 链接 既 有 上 夯 线 也 有 下 夯 线 ,结果 如 图 上 机 6-5 所 示 。 


[= = = 
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图 上 机 6-5 超 链接 装饰 线 
提示 
先 针 对 超 链接 a 标签 定义 HTML 标签 选择 器 ,再 针对 局 部 区 域 的 超 链接 定义 类 选择 
器 ,并 为 局 部 区 域 的 容器 定义 ID 属性 ,使 用 ID 和 类 名 构成 上 下 文选 择 器 。 


练习 2 熟悉 常用 的 CSS 样式 属性 


问题 

本 章 详细 地 介绍 了 有 关 背 景 .边框 文字、 字体 、 列 表 等 CSS 属性 ,在 上 面 的 指导 和 练习 
中 ,我 们 使 用 了 其 中 一 部 分 。 其 他 部 分 请 参考 本 章 理论 部 分 的 范例 进行 练习 。 

提示 

重点 练习 background- * ,border- * ,text-* _font- * list-style- * 这 几 类 常用 的 属性 。 


上 机 7 
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名 任务 ] 模拟 城市 选择 器 
名 任务 2 模拟 扫描 码 下 载 提示 
如 任务 3 模拟 职能 类 别 选择 器 





第 1 阶段 指导 

指导 1 模拟 城市 选择 器 

完成 本 任务 所 用 到 的 主要 知识 点 : 

æ display 

æ position 

问题 

前 程 无 忧 首页 提供 了 招聘 职位 搜索 器 ,如 图 上 机 7-1 所 示 。 
zag | 2x EBER 
[anus | emee M SESI 

图 上 机 7-1 招聘 职位 搜索 器 
单 击 * 选 择 地 区 ?列表 框 时 ,网 页 中 将 弹出 城市 列表 供用 户 选择 工作 地 点 ,如 图 上 机 7-2 
所 示 。 


用 户 选 择 城市 后 ,或 者 单 击 右 上 角 “ 关 闭 ” 按 钮 ,弹出 的 城市 列表 将 消失 , 回 到 招聘 职位 
搜索 器 界面 ,如 图 上 机 7-3 所 示 。 

分 析 

弹出 的 “城市 列表 ?页 面 不 可 能 凭空 产生 ,其 本 来 就 存在 于 当前 网 页 中 ,只 不 过 一 般 的 时 
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主要 城市 : 
ARU 
BER 
C 长 春 
DAKE 
E SERS 
下 福州 
6 广州 
互 哈尔滨 
淮安 
丁 济南 
九江 
K RI 
所 有 省 份 : 
A-G 
H-J 
L-S 
T-Z 


特殊 频道 : 








台湾 


3 Ë ñ 


重庆 


海口 


吉林 


aJ 
河北 省 
内 蒙古 
西藏 


工 兰 州 
下 绵阳 
ZH ZE ŽA NAR 


呼和浩特 惠州 ”衡阳 FER 


江门 ROM ATO 工 烟台 


福建 省 甘肃 省 FRARI MA 贵州 省 国外 


河南 省 黑龙 江 省 。 湖北 省 湖南 省 吉林 省 江苏 省 江西 省 
宁夏 青海 省 山东 省 山西 省 陕西 省 四 川 省 
香港 ya 云南 省 浙江 省 


珠 三 角 EH 汕头 珠海 佛山 中 山 江门 湛江 Sk 清远 ) 


O 请 选择 工作 地 点 [不 限 ] [关闭 ] 


廊坊 临沂 ”洛阳 连云港 柳州 


宁波 ”南昌 Ma AF 
泉州 SSS 清远 
深圳 ”沈阳 石家庄 PH =F 


ë 
pi 


郑州 hu 珠海 RI 株 州 WI 
张家港 6 








图 上 机 7-2 ”城市 选择 器 
EIN e = mee 
请 输入 关键 字 [E 
图 上 机 7-3 HERT 


候 处 于 隐藏 状态 ,需要 它 时 才 让 它 显示 出 来 。 显 示 时 , 它 处 于 网 页 正文 的 上 层 , 定 位 在 正文 
区 域 的 中 央 。 通 过 display 属性 我 们 可 以 控制 它 的 隐藏 或 显示 ,而 定位 则 是 由 position 来 


控制 。 


解决 方案 
(1) 创建 HTML 网 页 , 先 编写 搜索 表单 中 的 基本 代码 。 


oooDr 


<! DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 


"http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 


<html> 
<head> 
<title> 弹 出 城市 列表 </title> 


<style type = "text/css"> 


</style> 


</head> 


10 <body> 


11 
12 


<p> 首 页 </p> 


<form> 
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13 招聘 职位 搜索 表单 </br > 

14 职位 名 :< input type = "text" name = "txtJobName" id= "txtJobName" /> 
15 城市 :< input type = "text" name = "txtJobCity" id= "txtJobCity" /> 
16 < input type = "button" value = "点 此 选择 城市 " /> 

37 < input type = "submit" name = "btnsubmit" value = "搜索 " /> 

18 </form> 

19 </body> 

20 </html> 


代码 运行 如 图 上 机 7-4 所 示 。 














E) FAshilihtml 








首页 


招聘 职位 搜索 表单 
职位 名 : 城市 : [ mhoañim ] (搜索 ] 











图 上 机 7-4 表单 


(2) 编写 模拟 城市 列表 的 代码 ,在 </form > 之 后 ,< body > 之 前 ,使 用 < div > 标签 包 庄 整 
个 城市 列表 。 


1 <div id= "divCityList"> 

2 < span > 请 选择 工作 地 点 </span> 
3 < span 站 不 限 jK/span> 

4 < span 站 关闭 jK/span> 

5 < table style = "clear:both"> 

6 < caption> 主 要 城市 </caption > 
7 <tr> 

8 <td> 北 京 </td> 

9 <td> 上 海 </td> 

10 <td> 深 圳 </td> 

11 </tr> 

32 <tr> 

13 <td> 长 沙 </td> 

14 <td> 株 洲 </td> 

15 <td> 湘 潭 </td> 

16 </tr> 

17 </table> 


18 </div> 


G) 给 < div > 加 一 个 边框 ,编写 CSS 样式 代码 。 


1 <style type = "text/css"> 
2 #divCityList{ 
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3 border:1px solid gray; 


5 </style> 


代码 运行 如 图 上 机 7-5 所 示 。 


= 

















首页 
招聘 职位 搜索 表单 





职位 名 : 城市 : Catanin ) (RF) 
oL ORI EA 
主要 城市 





北京 上 海 深圳 
长 沙 株洲 洒洒 























图 上 机 7-5 ”模拟 城市 选择 器 


(4) 控制 < div > 顶部 3 个 文字 块 的 位 置 ,顶部 一 行 需要 整体 的 背景 色 。 可 将 3 个 span 
用 单独 的 < div > 包 庄 起来。 修改 后 的 代码 如 下 。 


1 <div id= "divTitle"> 

2 < span id = "spanhdress"> 请 选择 工作 地 点 </span> 
3 < span id = "spanNone">[ + IR ]J</span > 

4 < span id= "spanC1ose">[%: fJ ]J/span > 

5 </div> 


(5) 给 它们 定义 样式 。 


1 #divTitle{ 

2 width:100 $% ; 

3 background - color: # abcdef; 
4 cursor :move; 

5 float:left; 

em: 

7 # spanAddress{ 

8 float:left; 

9 } 

10 # spanNone, # spanClose{ 
11 float:right; 

12 font - weight :bold; 
13 cursor :pointer; 
341] 


代码 运行 如 图 上 机 7-6 所 示 。 
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asore 31 > 文件 SE wm TE #|#* — D x 
@ € Ç | % 9 file:///F;/shili.html ż v omir — o|] 
+ ”ARER 有 收藏 ,点击 导 入 ! Bë - 


D | 四 | 口 弹出 城市 列表 x |+ eo 





首页 
招聘 职位 搜索 表单 
职位 名 :| ] 城市 :[ | [点 此 选择 城市 | | 搜索 














图 上 机 7-6 模拟 城市 选择 器 
(6) 考虑 到 ”城市 列表 "div 应 该 是 显示 在 网 页 正文 的 上 方 , 不 占用 正文 的 空间 ,修改 它 


的 样式 规则 ,使 用 绝对 定位 并 设置 坐标 。 


1 #divCityList( 

A border:1px solid gray; 
3 position:absolute; 

4 top:60px 

5 left:200px; 

cmd 


此 时 运行 代码 会 有 元 素 重 全 ,如 图 上 机 7-7 所 示 。 








3602225658 8.1 > 文件 Sú s IA un |w — D x 
@ € [$ Y file:///F:/shil.html 乡 | v_ 〇 .在 4S 店 看 的 事 tQ | 
+ v SDRE. SESA! š 
plefBmomne |e de 

首页 
招聘 职位 搜索 表单 
职位 名 : 








图 上 机 7-7 元 素 重生 
D 对 它 的 背景 色 、 内 部 表格 进行 修饰 。 样 式 代码 修改 如 下 。 


1 #divCityList( 

Z: border:1px solid gray; 
3 position:absolute; 

4 top:60px; 

5 left:200px; 























228 使 用 HTML 和 CSS 开 发 Web 网 站 
6 background - color: # fedcba; 
T width:300px; 
co 
9 #divCityList table{ 
10 width:100 % ; 
11 border - collapse:collapse; 
12 border:1px doube gray; 
137 
14 #divCityList table td{ 
35 border:1px double gray; 
16 text — align:center; 
JI 


运行 结果 如 图 上 机 7-8 所 示 。 





> 文件 ma 收藏 IR mm [w 一 | 口 | X 








3602582588 8.1 
@ ET C| $ g fie:///F:/shili.html 


+ ”人 RAR 有 收藏 , 点击 导 入 ! 


D: O | Danas x |+ 


$ v .养老 全 将 迎 十 -Q | 
Bè ~ 


R 





首页 
招聘 职位 搜索 表单 
职位 名 :| 


| [ez] 








I 
北京 上 海 深圳 





图 上 机 7-8 设置 表格 样式 


(8) 最 后 一 步 ,“ 城 市 列表 ”div 仅 当 需要 时 才 显 示 , 一 般 情况 下 隐藏 。 在 它 的 标签 上 直 


接 使 用 内 联 样 式 。 修 改 代码 如 下 。 


1 <div id= "divCityList" style = "display:none"> 


代码 运行 结果 如 图 上 机 7-9 所 示 。 





查看 收藏 IR 帮助 | 曾 一 D X | 
$  Y_ 〇 .名 企 高 薪 急 聘 FQ | 





Be 
Bë 


I 
Ú 

















3602230588 81 > Z 
@ € e [O Y file:///F:/shili.html 
èv SENE, 点 主导 入 | 
b í O | ri suspa x =: 
首页 
招聘 职位 搜索 表单 
职位 名 :| ] 城市 : | 点 此 选择 城市 | | 搜索 | 
图 上 机 7-9 ”隐藏 城市 选择 器 


指导 2 模拟 扫描 码 下 载 提 示 
完成 本 任务 需要 用 到 的 主要 知识 点 : 


æ position 

æ background 
cursor 

æ width, height 
æ left, top 

问题 
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许多 网 站 都 有 可 以 固定 在 屏幕 某 一 块 地 方 的 广告 .二 维 码 之 类 的 < div > 块 ,如 图 上 机 7-10 


同 易 考 检 






买房 


GUN 港 现行 证 即 答 即 直 
天 气 ] 长 沙 元 日 S 温 回升 
IRE HERES 
CRD) yrl 户 型 3458/ 平 起 
DEER F 





RREME 





湘 府 路 快速 化 改造 星 沙 到 洋 湖 仅 半 小 时 
世界 最 大 双 螺 族 钢 结构 长 沙 封 项 明年 可 观 景 
世界 首 条 环岛 高 铁 贯 通 亚洲 虞 大 地 下 火车 站 通 
长 沙 将 建 两 大 湿地 望城 明年 建 20 所 标准 化 学 校 
元 旦 出 行 避 让 这 些 墙 点 石 长 铁路 复线 下 月 通车 
长 沙 年 漕 6. 3 万 本 房产 证 长 沙 优化 十 拥堵 区 域 
开元 路 商 住 公寓 交 3 千 抵 1 万 省 府 特惠 房 享 87 折 


BAA00298 9 m 论 二 


PERR 


乐 系 教授 的 396 平 LOFT 





农村 兄弟 拒 伍 房 奴 PUARE 

121 88 H 3:22 JUE eE JUe 
虎 悍 丈 夫 花 :万 装 50 平 婚 房 OFRENE 
REAPER 帅 博 士 亲 设计 173 平 家 
菲 她 妇 美 葛 中 国 农村 :房屋 高 大 农具 电器 多 

实 拍 孟 买 英 民 房 惨 不 忍 旷 rs A ëE 
阵 弄 恩 台 湾 头 老 首 曝 光 AEREE 


BAREMO NEARE AME 


图 上 机 7-10 固定 定位 提示 
注意 右 下 角 ,有 扫 码 下 载 客户 端 提示 , 单 击 “ X ”可 以 关闭 此 提示 。 单 击 图 片 或 文字 ,将 
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引导 用 户 去 下 载 客 户 端 。 页 面 滚动 时 ,此 提示 一 直 处 于 右 侧 的 固定 
nE. 

我 们 的 任务 中 也 要 实现 类 似 的 功能 ,图 片 bookmark. png 已 经 准 
备 好 ,如 图 上 机 7-11 所 示 。 

分 析 

使 用 position 属性 确定 元 素 的 定位 方式 ,赋值 为 fixed 可 以 使 页 
面 元 素 固定 在 文档 窗口 的 某 处 ,不 随 文档 正文 滚动 而 滚动 。“X” 和 
二 维 码 图 片 文字 链接 等 可 单 击 区 域 由 绝对 定位 来 实现 。 

解决 方案 

(1) 创建 HTML 网 页 ,在 其 中 模拟 一 些 正文 内 容 , 并 创建 用 于 
定位 的 < div > 标签 。 








图 上 机 7-11 二 维 码 


背景 图 
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1 <!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 

2 "http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
3 <html> 

4 <head> 

5 <title> 二 维 码 提示 </title> 

6 < style type = "text/css"> 

7 

8 


</style> 
9 </head> 
10 <body> 
11 <div id= "bookmarker"> 


13 </div> 

14 <p> 模 拟 的 正文 部 分 </p><p> 模 拟 的 正文 部 分 </p><p> 模 拟 的 正文 部 分 </p> 
15 <p> 模 拟 的 正文 部 分 </p><p> 模 拟 的 正文 部 分 </p>< p> 模拟 的 正文 部 分 </p> 
16 <p> 模 拟 的 正文 部 分 </p><p> 模 拟 的 正文 部 分 </p>< p> 模拟 的 正文 部 分 </p> 
17 <p> 模 拟 的 正文 部 分 </p><p> 模 拟 的 正文 部 分 </p>< p> 模拟 的 正文 部 分 </p> 
18 <p> 模 拟 的 正文 部 分 </p><p> 模 拟 的 正文 部 分 </p>< p> 模拟 的 正文 部 分 </p> 
19 <p> 模 拟 的 正文 部 分 </p><p> 模 拟 的 正文 部 分 </p><p> 模 拟 的 正文 部 分 </p> 
20 <p> 模 拟 的 正文 部 分 </p><p> 模 拟 的 正文 部 分 </p>< p> 模拟 的 正文 部 分 </p> 
21 </body> 

22 </html> 


ID 取 名 为 bookmarker 的 < div > 作为 要 固定 位 置 的 悬浮 提示 的 包 计 容器 。 它 的 内 容 是 
一 幅 图 片 ,但 图 片上 有 3 处 可 以 点 击 , 其 中 有 “X” 号 、 二 维 码 图像 和 文字 链接 。 
(2) 修改 代码 ,为 bookmarker 容器 添加 内 容 。 


1 <div id= "bookmarker"> 

2 < div id = "bookmarkerBg"> 图 片 作为 背景 </div> 

3 < div id = "bookmarkerC1ose">X </div> 

4 <a target="_blank" href = " # "> 二 维 码 </a> 

5 <a target ="_blank" href = " # "> 扫描 下 载 客户 端 <br> 
6 ”掌上 订阅 更 方便 </a> 

7 


</div> 


此 时 代码 运行 的 结果 如 图 上 机 7-12 所 示 。 
3602250838 8.1 > x =E 收 训 IA w} 
@ Ç Q Ẹ file:///F:/shili.htrm 
+ * SEUA. 点 去 导入 
DO|D=sms >x|+ 
图 片 作为 背景 
三 维 码 扫描 下 载 容 户 端 
ZOTE 











模拟 的 正文 部 分 
模拟 的 正文 部 分 
模拟 的 正文 部 分 








图 上 机 7-12 模拟 界面 
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(3) 查看 作为 背景 的 图 片 文件 的 属性 ,得 知 图 片 的 原始 尺寸 为 125 * 248 像素 。 基 于 这 
个 数据 设置 bookmarkerBg 和 bookmarker 的 样式 属性 。 修 改 CSS 代码 如 下 。 


1  #bookmarker( 

2 border:1px solid gray; 

-| width:125px; 

4 height :248px; 

SR 

6 #bookmarkerBg( 

7 background — image:ur1("bookmark. png" ) ; 
8 width:125px; 

9 height:248px; 

10 } 


(4) 对 bookmarker 设置 固定 定位 。 
1 
z: 
3 
4 
S 
6 
T 


代码 运行 如 图 上 机 7-13 所 示 。 


minit XE 


# bookmarker{ 
border:1px solid gray; 
width:125px; 
height :248px; 
position:fixed; 
left:1144px;top:240px; 
} 





模拟 的 正文 二 分 
模拟 的 正六 部 分 
模拟 的 正文 部 分 
模拟 的 正文 名 分 
模拟 的 正文 部 分 





Eriam 便 


图 上 机 7-13 ”实现 定位 


(5) 名 为 bookmarkerClose 的 div 应 定位 到 背景 图 像 中 的 又 处 。 修 改 CSS 样式 代码 ， 
添加 bookmarkerClose 的 ID 选择 器 ,为 方便 观察 可 以 为 它 临 时 加 上 边框 。 


# bookmarkerClose( 
border:1px solid gray; 
width:13px; height:12px; 
overflow:hidden; 
position:absolute; 
left:107px;top:5px; 
cursor:pointer; 


° — O Q & wne 
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此 时 bookmarkerClose 对 应 的 div 定位 到 了 图 像 中 的 叉 处 ,鼠标 移 上 去 之 后 有 显示 
效果 。 

(6) 同 理 , 添 加 名 为 bookmarkerCodeImage 和 bookmarkerLinkText 的 ID 选择 器 ,为 
这 两 个 链接 定位 ,代码 如 下 。 


1 # bookmarkerCodeImage{ 

2 border:lpx solid gray; 
3 display:block; 

4 position:absolute; 

5 width: 50px; 

6 height:50px; 

7 top:110px;left:37px; 
Boy 

9 # bookmarkerLinkText{ 

10 font — size:12px; 

E display:block; 

12 position:absolute; 

13 width: 88px; 

14 overflow:hidden; 

15 top:190px; 

16 left:22px; 

39 


代码 运行 如 图 上 机 7-14 所 示 。 
(7) 最 后 对 整个 文档 的 内 容 进行 整理 ,去 除 不 必要 的 文字 和 边框 ,最 后 时 限 的 效果 如 图 
上 机 7-15 所 示 。 





图 上 机 7-14 模拟 提示 链接 定位 图 上 机 7-15 最终 效果 


第 2 阶段 练习 


练习 ”模拟 职能 类 别 选择 器 


问题 
前 程 无 忧 的 职位 搜索 栏目 中 ,可 以 按 职能 类 别 搜索 职位 ,如 图 上 机 7-16 所 示 。 





上 机 7 Web 标准 与 页 面 布局 








EM “首页 PIRRE “ 求职 攻略 = QI 
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图 上 机 7-16 ”职位 搜索 器 
单 击 职能 类 别 右边 的 “十 ”按钮 ,将 弹出 职能 类 别 列表 ,覆盖 在 网 页 正文 的 上 方 ,如 图 上 
机 7-17 所 示 。 
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图 上 机 7-17 弹出 职能 类 别 列表 
请 模拟 相关 内 容 ,实现 职能 类 别 列表 的 隐藏 和 定位 。 


请 参考 指导 1 的 思路 和 步骤 ,使 用 position 和 display 属性 来 实现 定位 和 隐藏 。 
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如 任务 1 实现 多 行 多 列 的 复杂 布局 
名 任务 2 模拟 构建 网 站 
名 任务 3 练习 实现 典型 局 部 布局 


第 1 阶段 ”指导 


指导 1 实现 多 行 多 列 的 复杂 布局 


完成 本 任务 所 用 到 的 主要 知识 点 : 

æ margin 属性 

æ float 属性 

问题 

结合 本 章 所 学 内 容 , 实 现 如 图 上 机 8-1 所 示 的 布局 。 
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图 上 机 8-1 多 行 多 列 布局 
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分 析 
分 析 页 面 整体 的 结构 可 以 发 现 ,这 是 一 个 4 行 2 列 的 结构 。 各 个 内 容 区 块 之 间 的 嵌 套 
关系 如 图 上 机 8-2 所 示 。 
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图 上 机 8-2 整体 布局 结构 


解决 方案 
(1) 创建 HTML 页 面 ,编写 HTML 部 分 代码 。 


<! DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
"http://www. w3. org/TR/xhtm11/DTD/xhtm11 - strict. dtd"> 
<html> 
<head> 
<title> 多 行 多 列 布局 </title> 
< style type = "text/css"> 


</style> 
</head> 
<body> 
<div id= "divContainer"> 
<div id= "divHeader"> Header </div> 
<div id= "divMenuBar"> divMenuBar </div > 
<div id= "divMain"> 
<div id= "divSideBar"> SideBar </div> 
<div id= "divContent"> Content </div> 
</div> 
<div id= "divFooter"> Footer </div > 
</div> 
</body> 
</html> 


(2) 为 了 避免 < body >,< div > 等 元 素 的 内 外 边 距 的 默认 值 在 不 同 浏览 器 中 存在 差异 造 
成 的 麻烦 , 先 将 这 两 种 标签 的 内 外 边 距 都 设置 为 0px, 编 写 CSS 代码 如 下 。 


1 
2 


body, div{ 
margin: 0px; 
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a padding: 0px; 
4 font — size:lem; 
S 


(3) 给 最 外 层 的 容器 定义 样式 规则 ,设置 宽度 ,水 平 居中 和 合适 的 背景 色 。 


1  #divContainer( 

2 width:960px; 

= margin:0px auto; 

4 background - color: # E9EEF2; 
Si 


代码 运行 如 图 上 机 8-3 所 示 。 
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图 上 机 8-3 页 面 结构 未 完成 版 


(4) 给 顶部 div 和 菜单 div 定义 样式 规则 ,设置 宽度 为 940px, 水 平 居 中 ,上 下 外 边 距 为 
5px, 还 有 合适 的 背景 色 和 高 度 。 


£ # divHeader{ 

2 width:940px; 

3 height :60px; 

4 margin:5px auto; 

5 background - color: # abcdef; 
Saba: 

7 # divMenuBar{ 

8 width:940px; 

9 height :30px; 

10 margin:5px auto; 

11 background - color: # fedcba; 
m 


代码 运行 如 图 上 机 8-4 所 示 。 
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图 上 机 8-4 设置 顶部 和 菜单 div 的 样式 
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(5) 给 divMain 和 divFooter 定义 样式 规则 。 





代码 运行 如 图 上 机 8-5 所 示 。 


e= = 


























图 上 机 8-5 设置 主体 和 底部 div 的 样式 





(6) 给 divSideBar 和 divContent 分 左右 两 栏 。 





代码 运行 如 图 上 机 8-6 所 示 。 




















图 上 机 8-6 SideBar 和 Content 进行 分 栏 
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现在 可 以 向 网 页 中 填充 一 些 自己 喜欢 的 内 容 了 。 
指导 2 模拟 构建 网 站 
完成 本 任务 所 用 到 的 主要 知识 点 : 
æ margin 属性 
= float 属性 
æ clear 属性 
问题 
我 们 开始 规划 网 站 ,以 图 上 机 8-7 为 例 构建 网 站 。 
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图 上 机 8-7 构建 网 站 


分 析 

首先 分 析 其 基本 布局 ,如 图 上 机 8-8 所 示 。 

主要 由 以 下 5 个 部 分 构成 。 

(1) Main Navigation 导航 条 ,具有 按钮 特效 。Width: 760px; Height; 50px。 

(2) Header 网 站 头 部 图 标 ,包含 网 站 的 logo 和 站 名 。Width: 760px; Height: 150px。 
(3) Content 网 站 的 主要 内 容 。Width: 480px; Height; Changes depending on content, 
(4) Sidebar 边框 ,一 些 附 加 信息 。Width: 280px; Height: Changes depending on content, 
(5) Footer 网 站 底 栏 , 包 含 版 权 信息 等 。Width: 760px; Height: 66px。 
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Main Menu 


Header 


Side Bar 





图 上 机 8-8 基本 结构 


解决 方案 
(1) 创建 HTML 网 页 ,将 5 个 部 分 都 放 入 到 盒子 中 。 


1 <!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
z "http://www. w3. org/TR/xhtm11/DTD/xhtm11 — strict. dtd"> 
3 <html> 

4 <head> 

5 <title> 多 行 多 列 布局 </title> 

6 < style type = "text/css"> 

z 

8 </style> 

9 </head> 

10 < body> 

11 < div id= "page — container"> 

12 <div id= "main- nav"> Main Nav </div > 

13 < div id= "header"> Header </div > 

14 <div id= "sidebar - a"> Sidebar A</div> 

15 <div id= "content"> Content </div > 

19 < div id= "footer"> Footer </div> 

20 </div> 


2 </body> 
22 </html> 
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(2) 给 最 外 层 的 容器 设置 样式 。 





(3) 现在 可 以 看 到 盒子 和 浏览 器 的 顶端 有 Spx 宽 的 空 除 。 这 是 由 于 浏览 器 的 默认 的 填 
充 和 边界 造成 的 。 消 除 这 个 空隙 ,就 需要 在 CSS 文件 中 写 人 。 





(4) 为 了 将 5 个 部 分 区 分 开 来 ,将 这 5 个 部 分 用 不 同 的 背景 颜色 标示 出 来 ,编写 CSS 





代码 运行 如 图 上 机 8-9 所 示 。 
(5) 首先 让 边框 浮动 到 主要 内 容 的 右边 ,用 CSS 控制 浮动 。 
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图 上 机 8-9 给 div 上 色 


(6) 往 主要 内 容 的 盒子 中 写 入 一些 文字 。 在 HTML 文件 中 写 入 : 


1 <div id= "content"> 

2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 

3 Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in 
4 sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod 

5 vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque 

6 justoa pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse 

7 mattis nunc vestibulum ligula. In hac habitasse platea dictumst. 
8 </div> 


代码 运行 如 图 上 机 8-10 所 示 。 
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图 上 机 8-10 ”向 右 浮 动 
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(7) 但 是 可 以 看 到 主要 内 容 的 盒子 占据 了 整个 page-container 的 宽度 ,需要 将 并 
content 的 右边 界 设 为 280px, 以 使 其 不 和 边框 发 生 冲突 。CSS 代码 如 下 。 


1 # content { 

y4 margin — right: 280px; 
3 background: green; 
2] 


同时 往 边框 里 写 人 一 些 文字 。 在 HTML 文件 中 写 入 : 


1 <div id= "sidebar - a"> 

2 

3 

4 

5 

6 

7 mattis nunc vestibulum ligula. In hac 
8 </div> 

9 

10 


代码 运行 如 图 上 机 8-11 所 示 。 


habitasse platea dictumst. 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec 
in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod 
vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque 
justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse 
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图 上 机 8-11 添加 内 容 并 设置 宽度 
(8) 这 也 不 是 我 们 想 要 的 ,网 站 的 底 框 跑 到 边框 的 下 边 去 了 。 这 是 由 于 我 们 将 边框 向 


右 浮动 ,由 于 是 浮动 ,所 以 可 以 理解 为 它 位 了 
子 对 齐 了 。 因 此 往 CSS 中 写 入 : 








F 整个 盒子 之 上 的 另 一 层 。 


因此 ， 
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局 





1 # footer { 

2 clear: both; 

3 background: orange; 
4 height: 66px; 
51 


代码 运行 如 图 上 机 8-12 所 示 。 
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图 上 机 8-12 ”清除 浮动 
现在 可 以 向 网 页 中 填充 一 些 自己 喜欢 的 内 容 了 。 


第 2 阶段 练习 


练习 实现 典型 的 局 部 布局 


问题 
完成 图 上 机 8-13 所 示 淘 宝 导 航 页 面 。 





图 上 机 8-13 div-ul-li 典型 局 部 布局 
提示 
该 布局 使 用 了 div-ul-li 典型 布局 ,文字 前 面 的 图 片 使 用 背景 偏 移 技术 。 
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名 任务 1 使 用 Dreamweaver 创建 表格 
?任务 2 使 用 Dreamweaver 创建 表单 和 表单 元 素 
十 任务 3 使 用 Dreamweaver 创建 网 页 


第 1 阶段 ”指导 


指导 1 使 用 Dreamweaver 创建 表格 


完成 本 任务 所 用 到 的 主要 知识 点 : 

æ Dreamweaver 中 表格 的 使 用 

问题 

为 网 站 制作 用 户 注册 页 面 ,考虑 到 注册 表单 包含 的 表单 元 素 较 多 ,所 以 采用 表格 进行 布 
局 ,结果 如 图 上 机 9-1 所 示 。 

解决 方案 

(1) 启动 Dreamweaver, 新 建 网 页 login. html 并 打开 这 个 网 页 。 

(2) 在 “插入 ”面板 中 选择 “常用 ”一 “表格 ”, 如 图 上 机 9-2 所 示 。 

(3) 单 击 “ 表 格 ”, 在 弹出 的 表格 对 话 框 中 填写 表格 信息 ,如 图 上 机 9-3 所 示 。 

(4) 单 击 “ 确 定 ” 按 钮 ,将 在 设计 视图 中 看 到 刚 插入 的 表格 ,如 图 上 机 9-4 所 示 。 

(5) 拖 动 鼠标 选择 第 一 行 的 3 个 单元 格 , 在 “属性 ”面板 中 单 击 “ 合 并 ”按钮 , 按 同样 的 方 
法 合并 最 后 一 行 的 3 个 单元 格 ,如 图 上 机 9-5、 图 上 机 9-6 所 示 。 

(6) 将 光标 放置 在 第 一 行 的 单元 格 中 ,在 “属性 ”面板 中 找到 水 平 选项 ,设置 为 居中 对 
齐 , 如 图 上 机 9-7 所 示 。 
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图 上 机 9-1 效果 图 








图 上 机 9-2 插入 表格 图 上 机 9-3 “表格 ”对 话 框 
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图 上 机 9-4 插入 表格 结果 
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图 上 机 9-5 ” 没 拆 分 前 
















































































图 上 机 9-6 ” 拆 分 后 





图 上 机 9-7 单元 格 属性 
(7) 按 同样 的 方法 设置 最 后 一 行 单元 格 水 平 居中 对 齐 , 结 果 如 图 上 机 9-8 所 示 。 
















































































图 上 机 9-8 单元 格 水 平 对 齐 


(8) 在 第 一 列 的 各 个 单元 格 中 依次 输入 各 个 表单 元 素 的 提示 文字 ,如 图 上 机 9-9 所 示 。 

(9) 此 时 发 现 这 个 表格 实际 上 不 能 满足 我 们 的 要 求 , 因 为 我 们 在 建 表 的 时 候 少 建 了 两 
行 , 现 需要 增加 两 行 。 将 光标 放置 在 任意 单元 格 。 单 击 “ 状 态 栏 ” 的 “标签 选择 器 ”中 的 
“table” 按 钮 选择 整个 表格 ,如 图 上 机 9-10 所 示 。 
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图 上 机 9-9 ”表单 元 素 的 提示 文字 































































































图 上 机 9-10 标签 选择 器 


(10) 将 “属性 ”面板 中 的 行 改 成 10 行 ,如 图 上 机 9-11 所 示 。 





图 上 机 9-11 为 表格 增加 行 
(11) 按 回 车 确定 修改 ,此 时 表格 已 经 被 修改 为 10 行 ,如 图 上 机 9-12 所 示 。 
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图 上 机 9-12 为 表格 增加 行 
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(12) 将 光标 放置 在 倒数 第 三 行 中 , 单 击 “ 属 性 ”面板 中 的 “ 拆 分 ”按钮 ,如 图 上 机 9-13 
所 示 。 
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BLESL9-13 ” 拆 分 单元 格 
(13) 在 弹出 的 对 话 框 中 设置 拆 分 为 3 列 , 如 图 上 机 9-14 所 示 。 
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图 上 机 9-14 “ 拆 分 单元 格 ” 对 话 框 
(14) 单 击 “ 确 定 ” 按 钮 后 结果 如 图 上 机 9-15 所 示 。 
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图 上 机 9-15 ” 拆 分 单元 格 结果 


(15) 可 以 发 现 拆 分 后 的 3 个 单元 格 的 对 齐 方式 为 水 平 居 中 对 齐 , 因 此 需要 修改 成 左 对 
齐 。 拖 动 鼠 标 选中 这 个 3 个 单元 格 ,在 “属性 ?面板 中 设置 水 平 为 左 对 齐 ,如 图 上 机 9-16 所 示 。 

(16) 按照 同样 的 方法 将 倒数 第 二 行 拆 分 为 3 个 单元 格 ,并 修改 它们 的 水 平 对 齐 方式 为 
左 对 齐 ,继续 输入 其 他 提示 文字 ,结果 如 图 上 机 9-17 所 示 。 

(17) 在 第 一 行 中 输入 用 户 注册 后 ,在 “属性 ”面板 中 找到 颜色 背景 , 单 击 “ 色 板 ”, 如 图 上 
机 9-18 所 示 。 
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图 上 机 9-16 设置 单元 格 对 齐 方式 


















































图 上 机 9-17 表单 元 素 提 示 文 字 
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图 上 机 9-18 ”属性 面板 设置 背景 颜色 
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(18) 单 击 喜欢 的 颜色 ,最 后 结果 如 图 上 机 9-19 所 示 。 









































图 上 机 9-19 单元 格 背景 颜色 


指导 2 使 用 Dreamweaver 创建 表单 及 表单 元 素 


完成 本 任务 所 用 到 的 主要 知识 点 : 
æ Dreamweaver 中 表单 和 表单 元 素 的 使 用 


问题 
按照 指导 1, 插 入 表格 和 表单 元 素 的 使 用 ,完成 注册 页 面 。 
解决 方案 


(1) 单 击 "文档 ”工具 栏 中 的 * 拆 分 视图 按钮 ,确保 可 同时 看 到 设计 界面 和 代码 ,如 图 上 
机 9-20 所 示 。 
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menus/DWMenuFile menus/DWMenuEdit menus/DWMenuView menus/DWMenulnsert menus/DWMenuMot 






































EBLESL9-20 ” 拆 分 视图 


(2) 在 代码 中 ,将 光标 放置 在 < table > 标签 开始 前 , 按 回 车 键 ,手工 编写 表单 标签 的 开始 
标记 ,如 图 上 机 9-21 所 示 。 

(3) 按照 同样 的 方法 ,在 </table > 标签 结束 后 , 补 齐 表单 标签 的 结束 标记 ,如 图 上 机 9-22 
所 示 。 
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<tr> 

<td colspan="3" align="center 
</tur> 
</table> 










680" border="1"> 
"#0033FF"> f 
n="3”align="center"> 用 户 注册 </td> </body> 


</hm j 





图 上 机 9-21 手工 编辑 代码 1 图 上 机 9-22 手工 编辑 代码 2 


(4) 将 光标 放置 在 用户 名 ”? 右 侧 的 单元 格 中 ,在 "插入 ?面板 的 “表单 "中 , 单 击 * 文 本 区 


域 ”, 如 图 上 机 9-23 所 示 。 
(5) 在 弹出 的 “输入 标签 辅助 功能 属性 ?对话 框 中 直接 单 击 “ 取 消 ?按钮 ,如 图 上 机 9-24 


所 示 。 
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如 果 在 插入 对 象 时 不 想 输入 此 信息 ， 千 更改- 镍 
助 功能 "首选 参数 。 














图 上 机 9-23 插入 文本 字段 图 上 机 9-24 “输入 标签 辅助 功能 属性 ”对 话 框 


(6) 按 同 样 的 方法 ,在 “密码 "和 “确认 密码 ” 右 侧 的 单元 格 中 插入 文本 字段 ,如 图 上 机 9-25 
所 示 。 
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图 上 机 9-25 插入 文本 字段 
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(7) 选中 “密码 ” 右 侧 的 文本 框 ,在 “属性 ”面板 中 将 它 的 “类 型 "修改 为 密码 ,如 图 上 机 9-26 
所 示 。 
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图 上 机 9-26 修改 属性 类 型 


(8) 将 光标 放置 在 “爱好 ” 右 侧 的 单元 格 中 , 单 击 “ 插 入 ”面板 中 的 “ 复 选 框 组 ”, 在 弹出 的 
“ 复 选 框 组 ”对 话 框 中 添加 复 选 框 ,如 图 上 机 9-27 所 示 。 
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图 上 机 9-27 插入 复 选 框 


结果 如 图 上 机 9-28 所 示 。 
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图 上 机 9-28 插入 复 选 框 结果 


(9) 在 “性 别 ? 右 侧 的 单元 格 中 单 击 * 插 和 人 ?面板 中 的 “ 单 选 按钮 组 ”, 在 弹出 的 “ 单 选 按钮 
组 对话 框 中 添加 单 选 按钮 ,如 图 上 机 9-29 所 示 。 
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| 
图 上 机 9-29 ”插入 单 选 按钮 组 
(10) 选中 第 一 个 单 选 按钮 ,在 “属性 ?面板 中 设置 名 称 为 “sex”, 值 为 "mn”, 如 图 上 机 9-30 
所 示 。 


AD 同样 的 方法 ,设置 男 一 个 单 选 按钮 的 名 称 也 为 “sex”, 但 是 值 为 “woman”, 如 图 上 
机 9-31 所 示 。 


























属性 T; a 
图 上 机 9-30 单 选 按钮 的 名 称 和 值 1 图 上 机 9-31 单 选 按钮 的 名 称 和 值 2 


(12) 在 年 龄 右 侧 的 单元 格 中 单 击 “ 插 入 ”面板 中 的 “列表 /菜单 ”, 就 可 以 插入 下 拉 列 表 
了 ,然后 选中 列表 框 ,在 “属性 ”面板 中 单 击 “ 列 表 值 …” 按 钮 ,如 图 上 机 9-32 所 示 。 
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图 上 机 9-32 插入 下 拉 列 表 


(13) 在 弹出 的 “列表 ”对 话 框 中 添加 选项 , 单 击 “ 确 定 ” 按 钮 ,如 图 上 机 9-33 所 示 。 

(14) 将 光标 放置 到 工作 经 历 的 右 侧 的 单元 格 中 , 单 击 “ 插 入 ”面板 中 的 “文本 区 域 ”, 可 
以 在 单元 格 中 插入 文本 区 域 ,效果 如 图 上 机 9-34 所 示 。 

AD 将 光标 放置 到 上 传 文件 的 右 侧 的 单元 格 中 , 单 击 “插入 ?面板 中 的 文件 域 ,可 以 创 
建文 件 域 。 效 果 如 图 上 机 9-35 所 示 。 

(16) 在 最 后 一 行 中 插入 两 个 按钮 。 
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图 上 机 9-34 插入 文本 区 域 
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图 上 机 9-35 ”插入 文件 域 
AT) 在 “属性 ”面板 中 ,将 第 二 个 按钮 的 动作 修改 为 重 设 表单 ,如 图 上 机 9-36 所 示 。 























图 上 机 9-36 设置 按钮 动作 
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(18) 保存 文档 ,将 在 浏览 器 中 看 到 网 页 的 测试 结果 ,如 图 上 机 9-37 所 示 。 
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图 上 机 9-37 测试 最 后 结果 


第 2 阶段 练习 


练习 ”使 用 Dreamweaver 创建 页 面 


问题 
将 第 3 章 的 上 机 部 分 的 指导 和 练习 改 用 Dreamweaver 实现 。 


上 机 10 


使 用 Dreamweaver 


管理 样式 和 模板 e 





?任务 1 14ÈM Dreamweaver 创建 样式 
名 任务 2 4M Dreamweaver 创建 模板 


第 1 阶段 ”指导 


完成 本 任务 所 用 到 的 主要 知识 点 : 

æ Dreamweaver 中 使 用 样式 

问题 

将 所 编写 的 CSS 样式 规则 创建 为 一 个 独立 的 CSS 文件, 以 后 编写 网 页 时 可 以 链接 这 个 
外 部 样式 表 文件 。 

分 析 

{E Dreamweaver 可 以 创建 CSS 文件 ,而 且 编写 CSS 代码 时 有 代码 提示 和 自动 补 全 
功能 。 

解决 方案 

启动 Dreamweaver ,执行 “文件 ”一 “新 建 " 命 仿 。 

在 “新 建文 档 ” 对 话 框 中 ,选择 “空白 页 ”, 在 “页 面 类 型 "中 选择 CSS”, 单 击 “ 创 建 ”" 按 钮 ， 
如 图 上 机 10-1 所 示 。 

及 时 保存 好 自己 的 CSS 文件 。 

在 代码 编辑 时 ,定义 所 需要 的 HTML 标签 选择 器 、 类 选择 器 ,编写 样式 规则 。 在 输入 
“{”( 左 大 括号 ) 时 及 每 次 回 车 时 ,Dreamweaver 总 会 弹出 CSS 属性 提示 列表 ,只 要 在 其 中 选 
择 即 可 ,也 可 以 输入 属性 名 称 的 前 几 个 字母 ,Dreamweaver 会 自动 匹配 到 相应 的 属性 ,确认 
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图 上 机 10-1 新 建 CSS 文件 


无 误 时 按 回 车 键 ,Dreamweaver 将 自动 补 齐 这 个 属性 名 称 。 
使 用 CSS 文件 时 可 参见 理论 知识 所 讲 ,在 < head > 标签 内 添加 < link > 标签 。 


第 2 阶段 练习 


练习 ”使 用 Dreamweaver 创建 模板 


问题 

使 用 Dreamweaver 的 模板 机 制 重 构 你 的 个 人 网 站 。 
提示 

具体 步骤 参考 第 10 章 。 


